/* tokens.css — Sistema de diseño CONTRAPUNTO. Variables = única fuente de verdad del color y
   la tipografía (METODOLOGÍA §5). Base CLARA canónica + modo NOCTURNO espejo. Ver docs/diseno-sistema.md.
   Regla: el verdigrís es interacción («esto es vivo»), nunca afecto. La rejilla de significado
   (frío↔cálido = oscuro↔brillo; bermellón = tensión; T/S/D = oro/verde-mar/bermellón) es idéntica
   en todas las vistas. */

:root {
  /* — Lienzo y tinta (CLARO) — */
  --paper: #f4f0e6;
  --paper-sunk: #ebe5d6;
  --line: #cbc3ae;
  --ink: #1c1a17;
  --ink-dim: #6b665a;

  /* — Interacción (reservado a «esto es vivo / esto eres tú») — */
  --live: #2e6e63;        /* verdigrís */
  --live-bright: #3f9384;

  /* — Rejilla de significado — */
  --tense: #c0492b;       /* bermellón / sanguina: tensión, disonancia */
  --rest: #5e8a6b;        /* verde salvia: reposo, consonancia */
  --bright-0: #b7a23c;    /* rampa de brillo (luminoso) */
  --bright-1: #e3b23c;
  --bright-2: #f2d27a;
  --dark-1: #5b6b8c;      /* rampa de oscuridad (sombrío) */
  --dark-2: #3a4a6b;      /* índigo gálico */
  --flow: #7a4a6e;        /* ciruela: conducción de voces, secundarias */

  /* — La rejilla como TEXTO: variantes con contraste AA (≥4.5:1) en su tema. Los tokens de
     arriba son para FORMA (barras, cuerdas, rellenos; ahí basta 3:1); como color de letra,
     el oro claro sobre papel es ilegible (1.56:1) — usa SIEMPRE estas. — */
  --bright-text: #6f6018;
  --dark-text: #3a4a6b;
  --flow-text: #7a4a6e;
  --tense-text: #9a3a20;

  /* — Función tonal (global) — */
  --fn-t: #e3b23c;        /* tónica: oro / reposo */
  --fn-s: #5bd0a0;        /* subdominante: verde-mar / puente */
  --fn-d: #c0492b;        /* dominante: bermellón / empuje */

  /* — 12 clases de altura (rueda anclada al círculo de quintas) — */
  --pc-0:  #c9a227;  /* Do  */
  --pc-1:  #a65bcb;  /* Do# / Reb */
  --pc-2:  #5eb36a;  /* Re  */
  --pc-3:  #ce5577;  /* Re# / Mib */
  --pc-4:  #2e9fc0;  /* Mi  */
  --pc-5:  #c18a2e;  /* Fa  */
  --pc-6:  #7a6bd8;  /* Fa# / Solb */
  --pc-7:  #a6b82e;  /* Sol */
  --pc-8:  #c64da8;  /* Sol# / Lab */
  --pc-9:  #34b59c;  /* La  */
  --pc-10: #c76b45;  /* La# / Sib */
  --pc-11: #4f7fd0;  /* Si  */

  /* — Tipografía — */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text: 'Spectral', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* Escala de cuarta justa (×1.333) sobre 17px */
  --t--2: 13px;
  --t--1: 17px;   /* cuerpo */
  --t-0: 22px;
  --t-1: 30px;
  --t-2: 40px;
  --t-3: 54px;
  --t-4: 72px;
  --t-mega: 120px; /* cifras grabadas de los visuales */

  /* — Movimiento — */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --d-1: 120ms;
  --d-2: 180ms;
  --d-3: 250ms;
  --d-4: 400ms;
  --d-5: 600ms;

  /* — Métrica — */
  --plate: 940px;     /* ancho de la plancha central */
  --margin-rune: 64px;
  --radius: 2px;      /* casi nada: esto es grabado, no cards */
}

/* — Modo NOCTURNO espejo: respeta el sistema, con override manual [data-theme] — */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='day']) {
    --paper: #14130f;
    --paper-sunk: #1c1a16;
    --line: #34302a;
    --ink: #ede7d8;
    --ink-dim: #9a9384;
    --live: #3f9384;
    --live-bright: #5cb5a4;
    --bright-text: #e3b23c;
    --dark-text: #8fa3c9;
    --flow-text: #b07aa2;
    --tense-text: #e0704f;
  }
}
:root[data-theme='night'] {
  --paper: #14130f;
  --paper-sunk: #1c1a16;
  --line: #34302a;
  --ink: #ede7d8;
  --ink-dim: #9a9384;
  --live: #3f9384;
  --live-bright: #5cb5a4;
  --bright-text: #e3b23c;
  --dark-text: #8fa3c9;
  --flow-text: #b07aa2;
  --tense-text: #e0704f;
}