/* ReinventAR — tokens sobre Brick v2 (paleta "classic" de Galicia, Inter, escala 4/8, radios 6/12/16, sombras solo en claro).
   Contrastes medidos (WCAG) en los comentarios; tests/test_diseno.py los verifica.
   Brick no tiene modo oscuro: el oscuro se deriva de sus neutros, pensado para salas con poca luz.
   El tema efectivo (elegido o el del sistema) lo resuelve un script en el <head> y queda en data-theme. */

/* Respaldo con las métricas de Inter (valores de next/font): mientras llega la fuente, el texto ocupa
   lo mismo y el cambio no mueve la pantalla (CLS). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
/* Ídem para JetBrains Mono (horarios y contador): mismo ancho de carácter (600/1000) y misma altura de línea. */
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Courier New"), local("Courier");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@layer tokens {
  :root {
    color-scheme: light;
    /* Superficies y texto */
    --bg: #f4f4f4;            /* grey20 */
    --surface-1: #ffffff;
    --surface-2: #f9f9f9;
    --surface-3: #ececec;     /* hover, pistas de medidores, tags */
    --ink: #1f1f1f;           /* 15,0:1 sobre --bg */
    --ink-muted: #5f5f5f;     /* 6,4:1 sobre blanco · 5,8:1 sobre --bg */
    --line: #e3e3e3;
    --line-strong: #8a8a8a;   /* bordes de campos y píldoras · 3,5:1 */

    /* Marca: el naranja es señal (ahora, en vivo, acción principal), no decoración */
    --brand: #fa6400;         /* classic primary */
    --on-brand: #1a1a1a;      /* 5,7:1 sobre el naranja (el blanco da 3,05 y no pasa AA) */
    --brand-ink: #a84308;     /* classic action · 6,0:1 sobre blanco, 5,1:1 sobre --brand-soft */
    --brand-soft: #ffe8d9;    /* fondo de "ahora", momentos y lo resaltado */
    --accent-on-ink: #fa6400; /* acción sobre fondo --ink (toast): 5,4:1 */
    /* Banner de anuncios (keynote y mainstage en Inicio): fondo oscuro también en claro */
    --hero: #1a1a1a;
    --on-hero: #f4f4f4;           /* 16,0:1 */
    --on-hero-muted: #bdbdbd;     /* 9,5:1 */

    /* Estados de Brick. Cada uno con su tinte (-soft) y el texto que va encima (--on-*-soft, ≥ 4,5:1). */
    --success: #1f7a1f;
    --success-soft: #e4f2e4;
    --on-success-soft: #1a6b1d;   /* 5,7:1 */
    --warning: #e99d09;           /* 2,3:1: solo punto o fondo, nunca texto */
    --warning-soft: #fdf1d8;
    --on-warning-soft: #3d2a00;   /* 12,3:1 */
    --error: #c51111;
    --error-soft: #fbe5e5;
    --on-error-soft: #a30f0f;     /* 6,6:1 */
    --on-error: #ffffff;
    --info: #2970bc;
    --info-soft: #e3eef9;
    --on-info-soft: #1d5a9a;      /* 6,0:1 */
    --focus: #0e7bc4;         /* link de Brick · 4,5:1 */
    /* Eventos de networking: se apoyan en info (antes un violeta suelto) */
    --event: var(--info);
    --event-soft: var(--info-soft);
    --on-event-soft: var(--on-info-soft);

    /* Profundidad: sombras suaves solo en claro; en oscuro, superficie + borde */
    --shadow-1: 0 1px 2px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .05);
    --shadow-2: 0 2px 2px rgb(0 0 0 / .12), 0 1px 8px rgb(0 0 0 / .10);
    --shadow-3: 0 3px 5px -1px rgb(0 0 0 / .2), 0 6px 10px rgb(0 0 0 / .14), 0 1px 18px rgb(0 0 0 / .12);
    --edge: 0 0 0 1px var(--line);  /* borde fino que acompaña a la sombra */

    /* Tipografía: 6 pasos. La sección (title) se separa de la tarjeta (heading). Mono solo para datos. */
    --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-data: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
    --t-display: 700 28px/34px var(--font-ui);
    --t-title: 700 20px/26px var(--font-ui);
    --t-heading: 600 17px/23px var(--font-ui);
    --t-body: 400 16px/24px var(--font-ui);
    --t-body-strong: 600 16px/22px var(--font-ui);
    --t-small: 400 14px/20px var(--font-ui);
    --t-small-strong: 600 14px/20px var(--font-ui);
    --t-micro: 600 12px/16px var(--font-ui);  /* sin mayúsculas */
    --t-time: 600 15px/20px var(--font-data);
    --t-data: 500 13px/18px var(--font-data);
    --track-tight: -0.02em;
    --track-micro: 0.02em;

    /* Espaciado (escala de Brick) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radios: 6 piezas chicas, 12 tarjetas y botones, 16 hojas, pill solo para píldoras de filtro y estados */
    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-pill: 999px;

    /* Tamaño mínimo de lo que se toca (WCAG 2.5.8 con margen) */
    --touch: 44px;

    /* Movimiento (animaciones de Brick) */
    --ease: 150ms ease-in-out;
    --ease-chip: 200ms ease-in-out;
    --ease-sheet: 350ms ease-out;

    /* Grabación */
    --rec: var(--error);
    --on-rec: #ffffff;
    --glow-rec: 0 0 0 6px rgb(197 17 17 / .18);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111111;
    --surface-1: #1b1b1b;
    --surface-2: #222222;
    --surface-3: #2d2d2d;
    --ink: #f2f2f2;           /* 16,6:1 */
    --ink-muted: #a8a8a8;     /* 7,2:1 sobre --surface-1 */
    --line: #2e2e2e;
    --line-strong: #6e6e6e;   /* 3,4:1 */
    --brand-ink: #ff9a57;     /* 8,2:1 sobre --surface-1, 7,1:1 sobre --brand-soft */
    --brand-soft: #3a2210;
    --accent-on-ink: #a84308; /* el toast es claro en oscuro: 5,4:1 (el naranja daba 2,8:1) */
    --hero: #2a1a0e;              /* marrón de marca: se distingue de las tarjetas grises */
    --on-hero: #f2f2f2;           /* 15,0:1 */
    --on-hero-muted: #c9b5a6;     /* 8,9:1 */
    --success: #5cc45c;
    --success-soft: #16301a;
    --on-success-soft: #7fd67f;   /* 8,0:1 */
    --warning: #f2b23a;
    --warning-soft: #33280f;
    --on-warning-soft: #ffe2a8;   /* 11,5:1 */
    --error: #ff6b61;
    --error-soft: #3a1614;
    --on-error-soft: #ff9a92;     /* 7,9:1 */
    --on-error: #1a0a09;
    --info: #6ba6e6;
    --info-soft: #14263a;
    --on-info-soft: #9cc6f2;      /* 8,6:1 */
    --focus: #6bb8f0;         /* 8,7:1 */
    /* Sin sombras: la profundidad la dan la superficie y el borde */
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 0 0 1px var(--line-strong);
    --edge: inset 0 0 0 1px rgb(255 255 255 / .07);
    --on-rec: #111111;
    --glow-rec: 0 0 0 6px rgb(255 107 97 / .22);
  }
}