/* ═══════════════════════════════════════════════════════════════════════════
   CORTE — TOKENS
   ═══════════════════════════════════════════════════════════════════════════

   La paleta y las medidas del sistema, SOLO como custom properties. Ni una
   regla de estilo: este archivo se puede linkear desde cualquier lado —incluida
   una vista standalone como la ficha de receta, que no quiere el chrome de la
   app— sin arrastrar nada más.

   Vivían adentro de design.css, así que una hoja que quisiera los colores tenía
   que tragarse el sistema entero (reset, layout, sidebar, componentes). Ahora
   son tres archivos con un orden que importa:

       corte-tokens.css  →  los valores          (este)
       design.css        →  el sistema base      (usa los valores)
       corte-ui.css      →  el kit de componentes (usa los valores)

   Los valores NO cambiaron al mudarse: es la misma paleta, en un solo lugar.
   La fuente de verdad de las decisiones es ESTANDARIZACION_UI.md y
   branding/CORTE_brand_guide.md.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --primary:        #6D28D9;
  --primary-dark:   #5B21B6;
  --primary-light:  #F1EDFB;
  --primary-border: #C4B0EC;
  --primary-glow:   rgba(109,40,217,.15);
  /* El violeta que se LEE sobre un fondo violeta tenue, en los dos modos.
     `--primary` y `--primary-dark` no se redefinen en oscuro a proposito (los
     botones y el sidebar tienen que seguir siendo el violeta de la marca), pero
     sobre `--primary-light` —que en oscuro es un translucido casi negro— un
     texto en #6D28D9 no se lee. Este token existe para eso: texto, borde e
     iconos violetas SOBRE tinte violeta. */
  --c-primary-legible: var(--primary);

  --accent:         #6D28D9;
  --accent-dark:    #5B21B6;
  --accent-light:   #F1EDFB;

  --sidebar-bg:     #241B38;
  --sidebar-2:      #2E2447;
  --sidebar-3:      #3A2E58;
  --sidebar-text:   #A9A0C4;
  --sidebar-active: #A3E635;
  --sidebar-width:  224px;

  --bg:             #F7F6FB;
  --surface:        #FFFFFF;
  --surface-2:      #F7F6FB;
  --surface-3:      #EDEAF3;

  --border:         rgba(30,27,41,.09);
  --border-med:     rgba(30,27,41,.14);
  --border-strong:  rgba(30,27,41,.22);

  --text:           rgba(30,27,41,.92);
  --text-secondary: rgba(30,27,41,.62);
  --text-muted:     rgba(30,27,41,.42);

  /* Los MISMOS colores, pero opacos y con el valor literal del brand guide.
     `--text` y compania llevan alpha, que es lo correcto sobre las superficies
     de la app pero no sirve donde el color se usa pleno (un borde, un icono, o
     una vista impresa como la ficha de receta). No son un duplicado de los de
     arriba: son la tinta de la marca, no el color de texto aplicado. */
  --tinta:            #1E1B29;
  --tinta-secundaria: #6F6B7D;
  --tinta-tenue:      #A5A1B0;

  /* Lima brillante: el acento sobre oscuro o sobre violeta (la navaja). */
  --lima-brillante:   #A3E635;

  /* LA FAMILIA LIMA — la superficie de Corte (el asistente) en toda la app.
     Vivía en corte-ui.css, que ya dejaba escrito "cuando una tercera hoja los
     use, suben". Esa hoja llegó el 04/09: la landing pública linkea SÓLO este
     archivo —una página de marketing no quiere el kit de componentes— y
     necesita la caja lima de Corte. Los valores no cambiaron.

     Del brand guide. El tint claro se vuelve translúcido en oscuro (abajo):
     una pastilla #F0F7DE sobre fondo negro es un bloque que grita. */
  --c-lima-tint:      #F0F7DE;
  --c-lima-borde:     #D5E8A8;
  --c-lima-texto:     #4C6B12;
  /* El lima PLENO con su tinta. Va FIJO en los dos modos a propósito: el
     relleno es el mismo color, así que aclararlo en oscuro sólo rompería el
     contraste que ya está medido (6,5:1, AA). */
  --c-lima-solid-texto: #33520A;
  /* Violeta claro del brand guide. Es el mismo valor al que apunta
     `--c-primary-legible` en oscuro, pero acá con su nombre de marca:
     se usa pleno, no como "el violeta que se lee sobre tinte". */
  --violeta-claro:    #8B5CF6;

  --success:        #15803D;
  --success-light:  #DCFCE7;
  --success-text:   #0F5132;

  --warning:        #D97706;
  --warning-light:  #FEF3E2;
  --warning-text:   #B45309;

  --danger:         #DC2626;
  --danger-light:   #FEE2E2;
  --danger-text:    #B91C1C;

  --info:           #0D9488;
  --info-light:     #CCFBF1;
  --info-text:      #0F766E;

  --purple:         #7C3AED;
  --purple-light:   #F3EEFF;
  --purple-text:    #4C1D95;

  --font:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.05), 0 1px 8px rgba(0,0,0,.04);
  --shadow-md:  0 2px 6px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.07);
  --shadow-lg:  0 4px 12px rgba(0,0,0,.07), 0 20px 40px rgba(0,0,0,.09);
  --shadow-xl:  0 8px 24px rgba(0,0,0,.08), 0 32px 64px rgba(0,0,0,.12);

  --transition:      0.18s cubic-bezier(.4,0,.2,1);
  --transition-fast: 0.1s ease;

  --topbar-height: 52px;
}

/* ── MODO OSCURO ── */
[data-theme="dark"] {
  --bg:             #16141C;
  --surface:        #201D29;
  --surface-2:      #1B1826;
  --surface-3:      #262233;

  --border:         rgba(255,255,255,.08);
  --border-med:     rgba(255,255,255,.13);
  --border-strong:  rgba(255,255,255,.2);

  --text:           rgba(255,255,255,.92);
  --text-secondary: rgba(255,255,255,.58);
  --text-muted:     rgba(255,255,255,.36);

  --c-lima-tint:    rgba(163,230,53,.12);
  --c-lima-borde:   rgba(163,230,53,.26);
  --c-lima-texto:   #A3E635;

  --primary-light:  rgba(139,92,246,.14);
  --primary-border: rgba(139,92,246,.32);
  --primary-glow:   rgba(139,92,246,.2);
  /* "Violeta claro (modo oscuro)" del brand guide. */
  --c-primary-legible: var(--violeta-claro);

  --info-light:     rgba(13,148,136,.18);
  --info-text:      #5EEAD4;

  --success-light:  rgba(21,128,61,.12);
  --warning-light:  rgba(217,119,6,.1);
  --danger-light:   rgba(220,38,38,.12);
  --info-light:     rgba(37,99,235,.12);
  --purple-light:   rgba(124,58,237,.12);

  /* Los `-text` semánticos TAMBIÉN se aclaran en oscuro. Los de modo claro son
     colores oscuros pensados para fondos blancos; sobre su propio tint
     translúcido encima de una superficie oscura quedaban ilegibles — medido:

         peligro  #B91C1C sobre rgb(55,30,41) →  2,35:1
         warning  #B45309 sobre rgb(51,38,38) →  2,89:1
         éxito    #15803D sobre rgb(31,41,43) →  2,97:1
         info     #5EEAD4 sobre rgb(33,37,64) → 10,12:1  ← ya estaba resuelto

     AA para texto chico pide 4,5:1. `--info-text` ya tenía su versión clara
     (alguien pegó contra esto antes y lo arregló solo para info); estos tres
     son el mismo arreglo, completo. Valores nuevos: 8,0 · 8,7 · 8,6. */
  --success-text:   #4ADE80;
  --warning-text:   #FBBF24;
  --danger-text:    #FCA5A5;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.3),  0 1px 8px rgba(0,0,0,.2);
  --shadow-md:  0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lg:  0 4px 12px rgba(0,0,0,.4), 0 20px 40px rgba(0,0,0,.35);
}