/* ============================================================
   Tokens del contrato · layout AURORA
   ------------------------------------------------------------
   Capa: layout

   Violeta y coral sobre arena, con Fraunces de titulo: el layout
   editorial. Es el UNICO de los cuatro con dos colores de marca de
   verdad —violeta que estructura, coral que acentua— y por eso
   mismo es el que dejo al descubierto que --accent-2 no significa
   lo que su nombre dice. Ver el bloque del acento secundario.

   Los valores salen del :root del monolito
   `_layout-apunte-aurora.php`, traducidos al vocabulario del
   contrato (apuntes/docs/CONTRATO-TOKENS.md).
   ============================================================ */

:root {
  /* ── Superficies ── arena, no blanco puro */
  --bg:            #faf9f7;
  --bg2:           #f3f1ee;
  --bg3:           #f6f4f1;
  --card:          #ffffff;
  --card2:         #f6f4f1;
  --border:        #e7e5e4;
  --border-2:      rgba(109,40,217,.18);

  /* ── Texto ── grises calidos, no neutros */
  --text:          #1c1917;
  --text-2:        #44403c;
  --gray:          #57534e;
  --gray-light:    #a8a29e;

  /* ── Acento principal ── el violeta */
  --accent:        #6d28d9;
  --accent-strong: #5b21b6;
  --accent-glow:   rgba(109,40,217,.22);
  --accent-dim:    rgba(109,40,217,.10);
  --on-accent:     #ffffff;
  --accent-rgb:    109,40,217;

  /* ── Acento secundario ──
     ⚠️ NO es el coral, aunque Aurora SI tenga dos colores de marca
     y el coral sea el segundo. Fue el primer intento y salio mal:
     los componentes usan --accent-2 para lo que ESTRUCTURA —el
     numero del paso, el titulo de seccion abierto, el pie— y en el
     monolito todo eso era VIOLETA. El coral quedaba gritando en
     los cuatro lugares mas grandes de la pagina.

     El coral no desaparece: sigue siendo --coral aca abajo y es la
     mitad del degrade de la firma, que es donde Aurora lo usa de
     verdad.

     Es la prueba mas clara del pendiente del contrato §1.4: el
     token dice "segundo color de marca" pero su rol real es "la
     version del acento que estructura". Ver ESTADO.md. */
  --accent-2:        #5b21b6;
  --accent-2-strong: #6d28d9;
  --accent-2-dim:    rgba(109,40,217,.10);
  --accent-2-rgb:    91,33,182;
  --on-accent-2:     #ffffff;

  /* ── Estado ──
     Los del modal del monolito; el aviso era var(--coral-dark).

     El aviso se oscurecio de #e11d48 a #d41c44: sobre --bg2
     (#f3f1ee) daba 4,17:1, por debajo de AA. Mismo tono (347°),
     -3 de luminosidad, 4,60:1. */
  --estado-ok:      #166534;
  --estado-aviso:   #d41c44;
  --estado-critico: #9f1239;

  /* ── Tipografia por ROL ── */
  --font-body:     'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-heading:  'Fraunces', Georgia, serif;
  --font-mono:     'Fira Code', monospace;

  /* ── Sistema ── */
  --navbar-h:      60px;
  --radius-sm:     8px;
  --radius:        10px;
  --radius-lg:     14px;
  --radius-xl:     18px;
  --t:             .3s ease;

  /* ── Sombras ── tintadas de tierra, no de negro */
  --shadow-sm:     0 2px 8px rgba(28,25,23,.06);
  --shadow:        0 4px 16px rgba(28,25,23,.08);
  --shadow-lg:     0 12px 40px rgba(28,25,23,.16);
  --shadow-accent: 0 6px 24px rgba(109,40,217,.14);

  /* ══════════════════════════════════════════════════
     PROPIO DEL LAYOUT · fuera del contrato
     ══════════════════════════════════════════════════ */

  /* El coral, que es el segundo color de marca de verdad. Vive acá
     abajo y no en --accent-2 por lo que explica el bloque de arriba. */
  --coral:        #f43f5e;
  --coral-strong: #e11d48;

  /* El degrade violeta→coral es LA firma de Aurora */
  --grad: linear-gradient(90deg, var(--accent) 0%, var(--coral) 100%);
  --navbtns-h: 50px;

  /* El pie del monolito era el tono tierra mas oscuro, no el acento.
     El componente comun lo pinta con --accent-2; acá se conserva el
     original desde la firma. */
  --footer-bg: #1c1917;

  /* SVG — valores de referencia (NO usar en atributos SVG directos) */
  --svg-curva:        #6d28d9;
  --svg-ejes:         #cccccc;
  --svg-labels:       #a8a29e;
  --svg-punto-gold:   #6d28d9;
  --svg-punto-naranja:#f43f5e;
  --svg-asintota-v:   #f43f5e;
  --svg-asintota-h:   #a8a29e;
  --svg-fondo:        #faf9f7;
  /* Relleno OPACO de las caras de una malla 3D: tapa lo que queda
     detras, que es de lo que vive el algoritmo del pintor. Por eso no
     puede ser --svg-fondo con alfa. Es el fondo tenido hacia --svg-curva.
     Ver apuntes/docs/REFERENCIA-graficos-3d.md. */
  --svg-superficie:        #efe8f5;
}

/* ══════════════════════════════════════════════════════
   MODO OSCURO — arena nocturna, violeta claro
   ══════════════════════════════════════════════════════ */
html.dark-mode,
body.dark-mode {
  --bg:            #150f1e;
  --bg2:           #1e1630;
  --bg3:           #261c3a;
  --card:          #1e1630;
  --card2:         #261c3a;
  --border:        #2e2040;
  --border-2:      rgba(167,139,250,.25);

  --text:          #faf9f7;
  --text-2:        #d6d3d1;
  --gray:          #a8a29e;
  --gray-light:    #78716c;

  /* El violeta se aclara: #6d28d9 sobre #150f1e da 2,2:1 */
  --accent:        #a78bfa;
  --accent-strong: #c4b5fd;
  --accent-glow:   rgba(167,139,250,.22);
  --accent-dim:    rgba(167,139,250,.12);
  --on-accent:     #150f1e;
  --accent-rgb:    167,139,250;

  --accent-2:        #a78bfa;
  --accent-2-strong: #c4b5fd;
  --accent-2-dim:    rgba(167,139,250,.12);
  --accent-2-rgb:    167,139,250;
  --on-accent-2:     #150f1e;

  --coral:        #fb7185;
  --coral-strong: #fda4af;
  --footer-bg:    #100b18;

  /* Variante oscura del semaforo: el verde #166534 sobre #1e1630
     da 1,9:1 y el critico #9f1239, 2,2:1 — ilegibles los dos.
     Aurora puede tenerla porque es un layout nuevo sobre el
     nucleo; en Premium sigue pendiente. */
  --estado-ok:      #4ade80;
  --estado-aviso:   #fb923c;
  --estado-critico: #fb7185;

  --shadow-sm:     0 2px 8px rgba(0,0,0,.25);
  --shadow:        0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.5);
  --shadow-accent: 0 6px 24px rgba(167,139,250,.20);

  --svg-curva:        #a78bfa;
  --svg-ejes:         #3d2f55;
  --svg-labels:       #78716c;
  --svg-punto-gold:   #a78bfa;
  --svg-punto-naranja:#fb7185;
  --svg-asintota-v:   #fb7185;
  --svg-asintota-h:   #78716c;
  --svg-fondo:        #1e1630;
  /* Relleno OPACO de las caras de una malla 3D: tapa lo que queda
     detras, que es de lo que vive el algoritmo del pintor. Por eso no
     puede ser --svg-fondo con alfa. Es el fondo tenido hacia --svg-curva.
     Ver apuntes/docs/REFERENCIA-graficos-3d.md. */
  --svg-superficie:        #2e2448;
}

html.dark-mode body { background: var(--bg); color: var(--text); }