@import url("https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&display=swap");
:root:root {
  --marca-principal: #c31214;
  --marca-oscuro: #a00f10;
  --brand: #c31214;
  --brand-dark: #a00f10;
  --brand-ink: #580809;
  --brand-soft: #f8e3e3;
  --brand-softer: #fcf3f3;
  --ground-2: #f2ece5;
  --surface-2: #ebe2d6;
  --line: #f4d4d5;
  --line-soft: #f9e7e8;
  --text: #351516;
  --muted: #7d595a;
  --faint: #a98686;
  --info: #c31214;
  --acento: #ff3534;
  --sans: "Azeret Mono", "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Barlow Condensed", "Segoe UI", system-ui, sans-serif;
  --pick: inset(0 round 14%);
  --desk-size: clamp(44px, 12cqi, 92px);
  --desk-height: clamp(44px, 12cqi, 92px);
  --desk-aspect: 1 / 1;
  --forma-radius: 14%;
  --p-dot-width: 32px;
  --p-dot-height: 32px;
  --brand-mark-size: 24px;
  --brand-mark-height: 24px;
  --tag-dot-size: 10px;
  --tag-dot-height: 10px;
  --rol-dot-size: 8px;
  --rol-dot-height: 8px;
  --ayuda-dot-size: 12px;
  --ayuda-dot-height: 12px;
}
@media screen {
:root:root:root[data-tema="oscuro"] {
  --ground: #0f0504;
  --ground-2: #170807;
  --surface: #1f0b09;
  --surface-2: #2b1714;
  --line: #56443e;
  --line-soft: #382521;
  --text: #e2d5c5;
  --muted: #a3978b;
  --faint: #968a80;
  --brand: #ff3534;
  --brand-dark: #f85d58;
  --brand-ink: #e2d5c5;
  --brand-soft: #400c0b;
  --brand-softer: #2f0c0a;
  --on-brand: #0f0504;
  --acento: #ff3534;
  --logo-fondo: transparent;
  --logo-relleno: 0;
  --primario-hover: #ff3534;
}
}