/* ============================================================
   Tokens del contrato, propios del layout y alias de marca
   ------------------------------------------------------------
   Capa: layout
   ============================================================ */

/* ═══════════════════════════════════════════════════
   VARIABLES · SISTEMA DE DISEÑO SOLAR PREMIUM
═══════════════════════════════════════════════════ */
:root {
  /* ══════════════════════════════════════════════════
     CONTRATO · lo que todo layout debe definir
     ══════════════════════════════════════════════════
     Estos nombres describen un ROL, no un color. Son los
     que el núcleo y los componentes tienen permitido usar.
     Ver /apuntes/docs/CONTRATO-TOKENS.md.

     Los nombres de MARCA (--gold, --navy, --cream…) siguen
     existiendo más abajo como alias, porque hay ~350
     declaraciones en los apuntes que los usan. Se eliminan
     en la Fase 7, cuando el contenido deje de nombrarlos. */

  /* ── Superficies ── */
  --bg:            #fdf8f0;
  --bg2:           #f5f0e8;
  --bg3:           #ede8df;
  --card:          #ffffff;
  --card2:         #f5f0e8;
  --border:        #e8e0d0;
  --border-2:      rgba(26,35,126,.12);

  /* ── Texto ── */
  --text:          #1a1a2e;
  --text-2:        #3a3a5c;
  --gray:          #6b6880;
  --gray-light:    #9590a8;

  /* ── Acento principal (el color de marca del layout) ── */
  --accent:        #F5A623;
  --accent-strong: #d4880f;
  --accent-glow:   rgba(245,166,35,.25);
  --accent-dim:    rgba(245,166,35,.08);
  /* Color legible ENCIMA del acento. No cambia entre modos. */
  --on-accent:     #1a237e;

  /* Canales RGB del acento, sin alpha.
     Existen porque los componentes necesitan el acento a muchas
     opacidades distintas —.04, .06, .3, .5…— y crear un token por
     cada una seria absurdo. Con los canales sueltos, un componente
     escribe rgba(var(--accent-rgb), .3) y sirve para cualquier
     layout: alcanza con que cada uno declare SUS canales.
     Antes de esto, esas opacidades eran el dorado de Premium
     escrito a mano dentro de componentes comunes. */
  --accent-rgb:    245,166,35;
  --accent-2-rgb:  26,35,126;

  /* ── Acento secundario ──
     El segundo color de marca: en Premium es el navy que
     estructura (borde de definiciones, títulos, curvas).
     Un layout que no tenga un segundo color puede apuntarlo
     al mismo valor que --accent; nada se rompe. */
  --accent-2:        #1a237e;
  --accent-2-strong: #2d3a9e;
  --accent-2-dim:    rgba(26,35,126,.08);
  /* Color legible ENCIMA del acento secundario. En Premium es el
     blanco que hasta la Fase 5 estaba escrito a mano dentro de los
     componentes, asi que el valor final no cambia. */
  --on-accent-2:     #ffffff;

  /* ── Estado ──
     Semáforo del sistema, independiente de la marca. Hoy lo
     usa el modal de membresía; lo va a usar el control de
     usuario del encabezado para avisar que la membresía está
     por vencer, sin tener que hardcodear un color.

     Estos tres son los valores para fondo CLARO. La variante
     oscura está más abajo, en los bloques dark-mode: sobre
     #1a1a2e estos daban 3,19 / 3,74 / 1,55:1 — "Membresía
     vencida" era ilegible. Ver el bloque oscuro.

     El aviso se oscureció de #c85000 a #b84900: sobre --bg2
     (#f5f0e8) daba 4,02:1, por debajo de AA. Mismo tono (24°),
     -3 de luminosidad, 4,64:1. Los otros dos ya pasaban. */
  --estado-ok:      #2d7a2d;
  --estado-aviso:   #b84900;
  --estado-critico: #721c24;

  /* ── Tipografía por ROL ──
     El layout elige las familias; los componentes piden el rol. */
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-mono:     'DM Mono', monospace;

  /* ── Sistema ── */
  --navbar-h:      64px;
  --radius-sm:     10px;
  --radius:        16px;
  --radius-lg:     24px;
  --radius-xl:     32px;
  --t:             .3s ease;

  /* ── Sombras ── */
  --shadow-sm:     0 2px 8px rgba(26,35,126,.06);
  --shadow:        0 4px 20px rgba(26,35,126,.10);
  --shadow-lg:     0 12px 48px rgba(26,35,126,.14);
  --shadow-accent: 0 8px 32px rgba(245,166,35,.22);

  /* ══════════════════════════════════════════════════
     PROPIO DEL LAYOUT · fuera del contrato
     ══════════════════════════════════════════════════
     Ningún componente común puede usar estos nombres: son la
     firma visual de Premium y otro layout no tiene por qué
     tenerlos. */

  /* Gradiente del hero */
  --hero-a:        #F9C05A;
  --hero-b:        #F5A623;
  --hero-c:        #F0821A;

  /* SVG — valores de referencia (NO usar en atributos SVG directos) */
  --svg-curva:    #1a237e;
  --svg-ejes:     #cccccc;
  --svg-labels:   #9590a8;
  --svg-punto-gold:   #F5A623;
  --svg-punto-naranja:#F0821A;
  --svg-asintota-v:   #F0821A;
  --svg-asintota-h:   #9590a8;
  --svg-fondo:    #fffdf6;
  /* Relleno OPACO de las caras de una malla 3D. Tiene que tapar lo que
     queda detrás —de eso vive el algoritmo del pintor—, así que no puede
     ser --svg-fondo con alfa. Es el fondo teñido hacia --svg-curva.
     Este valor es el que usan los cuatro apuntes de cuádricas, que son
     la referencia visual del sistema. Ver REFERENCIA-graficos-3d.md.
     Desde 2026-09-02 Premium SÍ redefine los nueve --svg-* en oscuro: el
     gráfico se integra a la página en vez de quedar como una hoja clara.
     El bloque oscuro está más abajo, en html.dark-mode y body.dark-mode. */
  --svg-superficie: #efeef6;
}

/* ── ANTI-FOUC: cuando el <html> tiene dark-mode (set por el script del head),
   replicamos las mismas variables que body.dark-mode para que el primer
   pintado ya salga oscuro. El JS del final agrega la clase también a <body>
   para mantener compatibilidad con todos los selectores body.dark-mode. ── */
html.dark-mode {
  --bg:         #12121f;
  --bg2:        #1a1a2e;
  --bg3:        #1f1f38;
  --text:       #e8e0c8;
  --text-2:     #c0b8a8;
  --gray:       #a09ab8;
  --gray-light: #c0bacc;
  --card:       #1a1a2e;
  --card2:      #1f1f38;
  --border:     #2e2e50;
  --border-2:   rgba(245,166,35,.12);
  --accent-2-dim: rgba(245,166,35,.06);

  /* ── GRÁFICOS EN OSCURO ──────────────────────────────────────
     Un solo SVG para los dos modos: el color no vive en el archivo
     sino en estos nueve nombres, que el SVG referencia desde sus
     atributos. Al aparecer la clase, el mismo dibujo se repinta.
     La jerarquía NO depende de esto: sale del grosor y la opacidad
     (REFERENCIA-graficos-3d.md §3), y por eso sobrevive al cambio.
     Dos relaciones del modo claro que hay que conservar:
       · --svg-superficie separada de --svg-fondo, o la malla se aplana;
       · --svg-ejes muy tenue (1,64:1, igual que el 1,58:1 del claro):
         son estructura, no texto.
     El dorado no cambia: ya es el acento de Premium en oscuro. */
  --svg-fondo:         #14142a;
  --svg-curva:         #98a3f2;
  --svg-ejes:          #43436a;
  --svg-labels:        #a09ab8;
  --svg-punto-gold:    #F5A623;
  --svg-punto-naranja: #ff9a45;
  --svg-asintota-v:    #ff9a45;
  --svg-asintota-h:    #a09ab8;
  --svg-superficie:    #2b2c55;
  --hero-a:     #b8620a;
  --hero-b:     #c47a18;
  --hero-c:     #8f4a06;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow:     0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.5);

  /* ── Semáforo, variante oscura ──
     Mismo tono, aclarado. Los del modo claro se calcularon
     contra crema y sobre #1a1a2e no llegaban: ok 3,19:1,
     aviso 3,74:1 y crítico 1,55:1 — "Membresía vencida"
     directamente no se leía.

     El tono se conserva en HSL, que es lo que mantiene la
     estética: 120° sigue siendo 120°, el naranja quemado pasa
     de 24° a 27° y el bordó de 354° a 354°. Solo sube la
     luminosidad. Medidos sobre --bg2: 6,49 / 6,13 / 4,92:1.

     Es el mismo movimiento que ya habían hecho Neo (Fase 5),
     Atlas y Aurora (Fase 6). Premium era el único que había
     quedado sin variante oscura. */
  --estado-ok:      #57b357;
  --estado-aviso:   #e8802a;
  --estado-critico: #e0606c;
}
html.dark-mode body { background: var(--bg); color: var(--text); }

/* ── DARK MODE ── */
body.dark-mode {
  --bg:         #12121f;
  --bg2:        #1a1a2e;
  --bg3:        #1f1f38;
  --text:       #e8e0c8;
  --text-2:     #c0b8a8;
  --gray:       #a09ab8;
  --gray-light: #c0bacc;
  --card:       #1a1a2e;
  --card2:      #1f1f38;
  --border:     #2e2e50;
  --border-2:   rgba(245,166,35,.12);
  --accent-2-dim: rgba(245,166,35,.06);

  /* ── GRÁFICOS EN OSCURO ──────────────────────────────────────
     Un solo SVG para los dos modos: el color no vive en el archivo
     sino en estos nueve nombres, que el SVG referencia desde sus
     atributos. Al aparecer la clase, el mismo dibujo se repinta.
     La jerarquía NO depende de esto: sale del grosor y la opacidad
     (REFERENCIA-graficos-3d.md §3), y por eso sobrevive al cambio.
     Dos relaciones del modo claro que hay que conservar:
       · --svg-superficie separada de --svg-fondo, o la malla se aplana;
       · --svg-ejes muy tenue (1,64:1, igual que el 1,58:1 del claro):
         son estructura, no texto.
     El dorado no cambia: ya es el acento de Premium en oscuro. */
  --svg-fondo:         #14142a;
  --svg-curva:         #98a3f2;
  --svg-ejes:          #43436a;
  --svg-labels:        #a09ab8;
  --svg-punto-gold:    #F5A623;
  --svg-punto-naranja: #ff9a45;
  --svg-asintota-v:    #ff9a45;
  --svg-asintota-h:    #a09ab8;
  --svg-superficie:    #2b2c55;
  --hero-a:     #b8620a;
  --hero-b:     #c47a18;
  --hero-c:     #8f4a06;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow:     0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.5);

  /* ── Semáforo, variante oscura ──
     Mismo tono, aclarado. Los del modo claro se calcularon
     contra crema y sobre #1a1a2e no llegaban: ok 3,19:1,
     aviso 3,74:1 y crítico 1,55:1 — "Membresía vencida"
     directamente no se leía.

     El tono se conserva en HSL, que es lo que mantiene la
     estética: 120° sigue siendo 120°, el naranja quemado pasa
     de 24° a 27° y el bordó de 354° a 354°. Solo sube la
     luminosidad. Medidos sobre --bg2: 6,49 / 6,13 / 4,92:1.

     Es el mismo movimiento que ya habían hecho Neo (Fase 5),
     Atlas y Aurora (Fase 6). Premium era el único que había
     quedado sin variante oscura. */
  --estado-ok:      #57b357;
  --estado-aviso:   #e8802a;
  --estado-critico: #e0606c;
}