/* ============================================================================
   CultFlow · design · tokens.css
   ----------------------------------------------------------------------------
   LA LEY. Única fuente de color, tipografía, espaciado y radios.
   Ningún preview, componente o pantalla escribe un hex, un px de fuente ni un
   radio a mano: todo sale de aquí con var(--cf-*).

   Estilo: Editorial Landscape Stack · Alpine Terracotta · Basic Roundness
   Temas:  [data-theme="light"] (por defecto) y [data-theme="dark"]

   Todos los pares texto/fondo cumplen WCAG 2.1 AA 4.5:1 y los bordes de
   componente 3:1 (invariante I2). Verificado con ./verify-contrast.py, que lee
   ESTE fichero — si cambias un valor, vuelve a pasarlo antes de commitear.
   ============================================================================ */

/* --- Tipografías autoalojadas · invariante I3: cero peticiones externas ----- */

@font-face {
  font-family: "Newsreader";
  src: url("./assets/fonts/newsreader-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("./assets/fonts/newsreader-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/geist-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("./assets/fonts/geist-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ============================================================================
   1 · TEMA CLARO (por defecto)
   ============================================================================ */

:root,
[data-theme="light"] {
  /* -- Superficies -------------------------------------------------------- */
  --cf-bg:              #FFFFFF;  /* lienzo de la página */
  --cf-bg-sunken:       #F6F2ED;  /* zonas hundidas: barras, cabeceras de tabla */
  --cf-surface:         #FFFFFF;  /* tarjetas, modales */
  --cf-surface-2:       #FAF7F3;  /* tarjeta anidada o fila alterna */

  /* -- Bordes ------------------------------------------------------------- */
  --cf-border:          #E0D8CF;  /* separadores decorativos */
  --cf-border-strong:   #8E8376;  /* borde de input/control — 3:1, obligatorio */

  /* -- Texto -------------------------------------------------------------- */
  --cf-fg:              #1C1917;  /* texto principal */
  --cf-fg-muted:        #57504A;  /* secundario, etiquetas */
  --cf-fg-subtle:       #6E665E;  /* captions — sigue cumpliendo 4.5:1 */

  /* -- Marca: terracota --------------------------------------------------- */
  --cf-primary:         #A9482B;
  --cf-primary-hover:   #8C3A21;
  --cf-primary-wash:    #F6E5DD;
  --cf-on-primary:      #FFFFFF;

  /* -- Acento: verde alpino ----------------------------------------------- */
  --cf-accent:          #3D5B58;
  --cf-accent-wash:     #E1EAE8;
  --cf-on-accent:       #FFFFFF;

  /* -- Semánticos ---------------------------------------------------------
     ATENCIÓN: "Cancelado" usa NEUTRAL, nunca error. Un evento cancelado es una
     decisión del organizador, no un fallo del sistema.
     --cf-on-semantic sirve para los cinco: en claro son colores oscuros y pide
     texto blanco; en oscuro se aclaran y pide tinta. Por eso es un token y no
     un blanco fijo. */
  --cf-on-semantic:     #FFFFFF;
  --cf-success:         #2F6B47;
  --cf-success-wash:    #E3EFE8;
  --cf-warning:         #8A5712;
  --cf-warning-wash:    #F7EAD3;
  --cf-error:           #A32F1E;
  --cf-error-wash:      #F8E3DE;
  --cf-info:            #2B5478;
  --cf-info-wash:       #E3ECF4;
  --cf-neutral:         #57504A;
  --cf-neutral-wash:    #ECE8E3;

  /* -- Superposiciones ----------------------------------------------------- */
  --cf-scrim:           rgba(28, 25, 23, 0.55);
  --cf-shadow-sm:       0 1px 2px rgba(28, 25, 23, 0.06);
  --cf-shadow-md:       0 4px 12px rgba(28, 25, 23, 0.10);
  --cf-shadow-lg:       0 12px 32px rgba(28, 25, 23, 0.16);
}

/* ============================================================================
   2 · TEMA OSCURO
   ============================================================================ */

[data-theme="dark"] {
  --cf-bg:              #16130F;  /* oscuro cálido, nunca negro puro */
  --cf-bg-sunken:       #0F0D0A;
  --cf-surface:         #221E19;
  --cf-surface-2:       #2B2620;

  --cf-border:          #39322B;
  --cf-border-strong:   #7A6F62;

  --cf-fg:              #F4EFE9;
  --cf-fg-muted:        #B9AFA4;
  --cf-fg-subtle:       #A2988C;

  /* La terracota se aclara y el texto encima pasa a TINTA OSCURA.
     Lección cara: blanco sobre terracota clara da 2.60:1 y falla AA. */
  --cf-primary:         #E68F66;
  --cf-primary-hover:   #F0A57F;
  --cf-primary-wash:    #332016;
  --cf-on-primary:      #1C1917;

  --cf-accent:          #8FB3AE;
  --cf-accent-wash:     #1B2A28;
  --cf-on-accent:       #12201E;

  --cf-on-semantic:     #1C1917;
  --cf-success:         #79B58F;
  --cf-success-wash:    #18291F;
  --cf-warning:         #D9A65C;
  --cf-warning-wash:    #2E2413;
  --cf-error:           #E98974;
  --cf-error-wash:      #2F1B16;
  --cf-info:            #88AFD6;
  --cf-info-wash:       #17242F;
  --cf-neutral:         #A2988C;
  --cf-neutral-wash:    #26221D;

  --cf-scrim:           rgba(0, 0, 0, 0.70);
  --cf-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.40);
  --cf-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.50);
  --cf-shadow-lg:       0 12px 32px rgba(0, 0, 0, 0.60);
}

/* Sigue la preferencia del sistema solo si nadie ha elegido tema a mano. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --cf-bg:            #16130F;
    --cf-bg-sunken:     #0F0D0A;
    --cf-surface:       #221E19;
    --cf-surface-2:     #2B2620;
    --cf-border:        #39322B;
    --cf-border-strong: #7A6F62;
    --cf-fg:            #F4EFE9;
    --cf-fg-muted:      #B9AFA4;
    --cf-fg-subtle:     #A2988C;
    --cf-primary:       #E68F66;
    --cf-primary-hover: #F0A57F;
    --cf-primary-wash:  #332016;
    --cf-on-primary:    #1C1917;
    --cf-accent:        #8FB3AE;
    --cf-accent-wash:   #1B2A28;
    --cf-on-accent:     #12201E;
    --cf-on-semantic:   #1C1917;
    --cf-success:       #79B58F;
    --cf-success-wash:  #18291F;
    --cf-warning:       #D9A65C;
    --cf-warning-wash:  #2E2413;
    --cf-error:         #E98974;
    --cf-error-wash:    #2F1B16;
    --cf-info:          #88AFD6;
    --cf-info-wash:     #17242F;
    --cf-neutral:       #A2988C;
    --cf-neutral-wash:  #26221D;
    --cf-scrim:         rgba(0, 0, 0, 0.70);
    --cf-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.40);
    --cf-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.50);
    --cf-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.60);
  }
}

/* ============================================================================
   3 · TIPOGRAFÍA · cuatro roles, cada uno con su trabajo
   ============================================================================ */

:root {
  --cf-font-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --cf-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cf-font-caption: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --cf-font-data:    "Geist", "Inter", system-ui, sans-serif;

  /* Escala tipográfica — proporción 1.25, redondeada a valores usables */
  --cf-text-2xs:  0.6875rem; /* 11px · solo metadatos en captions */
  --cf-text-xs:   0.75rem;   /* 12px */
  --cf-text-sm:   0.875rem;  /* 14px */
  --cf-text-base: 1rem;      /* 16px · mínimo de cuerpo, nunca menos */
  --cf-text-lg:   1.125rem;  /* 18px */
  --cf-text-xl:   1.375rem;  /* 22px */
  --cf-text-2xl:  1.75rem;   /* 28px */
  --cf-text-3xl:  2.25rem;   /* 36px */
  --cf-text-4xl:  3rem;      /* 48px · hero de landing */

  --cf-leading-tight:  1.15;
  --cf-leading-snug:   1.35;
  --cf-leading-normal: 1.6;

  --cf-tracking-tight: -0.015em;
  --cf-tracking-normal: 0;
  --cf-tracking-wide:  0.06em;  /* captions en mayúsculas */

  --cf-weight-regular: 400;
  --cf-weight-medium:  500;
  --cf-weight-semibold: 600;
}

/* ============================================================================
   4 · ESPACIADO, RADIOS, TAMAÑOS · Basic Roundness
   ============================================================================ */

:root {
  --cf-space-1:  0.25rem;
  --cf-space-2:  0.5rem;
  --cf-space-3:  0.75rem;
  --cf-space-4:  1rem;
  --cf-space-5:  1.5rem;
  --cf-space-6:  2rem;
  --cf-space-7:  3rem;
  --cf-space-8:  4rem;
  --cf-space-9:  6rem;

  --cf-radius-none: 0;
  --cf-radius-sm:   4px;
  --cf-radius-md:   8px;   /* por defecto en controles y tarjetas */
  --cf-radius-lg:   12px;
  --cf-radius-pill: 999px; /* tags */

  /* Objetivo táctil mínimo: 44px. La puerta se usa de pie y con una mano. */
  --cf-control-h:    2.75rem;  /* 44px */
  --cf-control-h-sm: 2.25rem;  /* 36px · solo en escritorio, nunca en la puerta */

  --cf-measure:      68ch;     /* ancho máximo de línea legible */
  --cf-container:    72rem;

  --cf-focus-width:  2px;
  --cf-focus-offset: 2px;
}

/* ============================================================================
   5 · FOCO · nunca opcional
   ============================================================================ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--cf-focus-width) solid var(--cf-primary);
  outline-offset: var(--cf-focus-offset);
  border-radius: var(--cf-radius-sm);
}

*, *::before, *::after { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}