/* ═══════════════════════════════════════════════════════════════════════════
   RESTART — Tema base
   Fuente de verdad del color. Si un color de marca cambia, se cambia ACÁ.

   Identidad:
     Fox Blue  #1e22aa  ·  PANTONE 2736 C  ·  el azul de la marca
     Selago    #edeffe  ·  PANTONE 7476 C  ·  el fondo
     Re Black  #212121  ·  PANTONE 419     ·  el texto

   Cómo usarlo:
     - Para color de marca, usá los semánticos (--rs-accent, --rs-bg, --rs-text…).
       Son los que flipean solos en dark mode.
     - Los tokens de marca (--rs-fox, --rs-selago, --rs-black) y la escala
       (--rs-fox-100…900) son constantes: NO cambian entre temas. Usalos solo
       cuando necesites ese color exacto sin importar el tema.
     - Para transparencias usá --rs-accent-aNN en vez de rgba(30,34,170,.NN):
       el rgba() hardcodea el color y no flipea en dark.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --rs-fox:    #1e22aa;
  --rs-selago: #edeffe;
  --rs-black:  #212121;

  /* ── Escala Fox Blue ───────────────────────────────────────────────────────
     Derivada del Fox Blue por luminosidad, manteniendo hue 238° y saturación
     70%. Todo sigue leyéndose como el azul de la marca. fox-700 ES Fox Blue.
     Contraste sobre blanco / sobre el fondo dark #151621:               */
  --rs-fox-100: #dcddf9;   /*  1.33:1  · 13.48:1 */
  --rs-fox-200: #a8aaf0;   /*  2.17:1  ·  8.28:1  ← acento en dark (AAA) */
  --rs-fox-300: #8e91eb;   /*  2.84:1  ·  6.33:1 */
  --rs-fox-400: #7478e7;   /*  3.76:1  ·  4.78:1 */
  --rs-fox-500: #5256e0;   /*  5.58:1  ·  3.22:1 */
  --rs-fox-600: #262bd9;   /*  8.64:1  ·  2.08:1 */
  --rs-fox-700: #1e22aa;   /* 11.26:1  ·  1.60:1  ← Fox Blue (AAA en light) */
  --rs-fox-800: #181b86;   /* 13.64:1  ·  1.32:1 */
  --rs-fox-900: #121568;   /* 15.76:1  ·  1.14:1 */

  --rs-selago-2: #f6f7ff;  /* Selago aún más claro, para franjas alternas */

  /* ── Neutros ───────────────────────────────────────────────────────────── */
  --rs-white: #ffffff;
  --rs-gray:  #5f5f7d;     /* texto secundario. AA sobre blanco (6.14:1) y
                              sobre Selago (5.37:1). Lleva el hue de la marca:
                              no es un gris neutro. */

  /* ── Estado ──────────────────────────────────────────────────────────────
     No son de marca, pero se eligieron para convivir con Fox Blue.        */
  --rs-error:   #c0281c;
  --rs-success: #0f7a4a;
  --rs-warn:    #a35a00;

  /* ── Roles ────────────────────────────────────────────────────────────────
     Banda armónica azul→violeta alrededor de Fox Blue (hue 238°). Cuatro roles
     distinguibles sin salir de la familia de marca. Todos AA sobre blanco;
     admin ES Fox Blue, el rol privilegiado. */
  --rs-rol-admin:      #1e22aa;   /* 238° · 11.31:1 */
  --rs-rol-comercial:  #1b66bb;   /* 212° ·  5.73:1 */
  --rs-rol-arquitecto: #622dbe;   /* 262° ·  7.96:1 */
  --rs-rol-finanzas:   #0b748e;   /* 192° ·  5.38:1 */

  /* ══ SEMÁNTICOS ══ Esto es lo que se usa en los componentes.
     Flipean en dark. Todo lo de arriba es constante.                      */
  --rs-accent:       var(--rs-fox);
  --rs-accent-hover: var(--rs-fox-800);
  --rs-on-accent:    var(--rs-white);   /* texto sobre el acento */

  --rs-bg:           var(--rs-selago);  /* fondo de página */
  --rs-surface:      var(--rs-white);   /* cards, topbar */
  --rs-surface-2:    var(--rs-selago-2);/* chips, inputs, franjas */

  --rs-text:         var(--rs-black);
  --rs-text-muted:   var(--rs-gray);
  --rs-text-on-dark: var(--rs-white);   /* sobre el acento o el hero */

  --rs-border:       color-mix(in srgb, var(--rs-accent) 14%, transparent);
  --rs-border-soft:  color-mix(in srgb, var(--rs-accent)  8%, transparent);

  /* ── Transparencias del acento ──
     Reemplazan a los rgba(30,34,170,.NN). Se recalculan solas cuando
     --rs-accent cambia en dark, que es lo que un rgba() no puede hacer. */
  --rs-accent-a04: color-mix(in srgb, var(--rs-accent)  4%, transparent);
  --rs-accent-a06: color-mix(in srgb, var(--rs-accent)  6%, transparent);
  --rs-accent-a08: color-mix(in srgb, var(--rs-accent)  8%, transparent);
  --rs-accent-a12: color-mix(in srgb, var(--rs-accent) 12%, transparent);
  --rs-accent-a16: color-mix(in srgb, var(--rs-accent) 16%, transparent);
  --rs-accent-a25: color-mix(in srgb, var(--rs-accent) 25%, transparent);
  --rs-accent-a30: color-mix(in srgb, var(--rs-accent) 30%, transparent);
  --rs-accent-a40: color-mix(in srgb, var(--rs-accent) 40%, transparent);

  /* ── Gradientes ──
     Monocromos: toda la profundidad sale de la escala Fox Blue.          */
  --rs-grad-brand: linear-gradient(135deg, var(--rs-fox-500) 0%, var(--rs-fox-700) 100%);
  --rs-grad-hero:  linear-gradient(135deg, var(--rs-fox-600) 0%, var(--rs-fox-700) 45%, var(--rs-fox-900) 100%);
  --rs-grad-soft:  linear-gradient(135deg, var(--rs-fox-400) 0%, var(--rs-fox-700) 100%);

  /* ── Sombras ── Tintadas con Fox Blue, no negro puro. ── */
  --rs-shadow-sm: 0 1px 12px color-mix(in srgb, var(--rs-fox) 7%, transparent);
  --rs-shadow:    0 2px 12px color-mix(in srgb, var(--rs-fox) 8%, transparent);
  --rs-shadow-md: 0 4px 20px color-mix(in srgb, var(--rs-fox) 10%, transparent);
  --rs-shadow-lg: 0 20px 60px color-mix(in srgb, var(--rs-fox) 20%, transparent);

  /* ── Tipografía y forma ── */
  --rs-font: 'Inter', sans-serif;
  --rs-mono: 'Space Mono', monospace;
  --rs-r:    10px;
}

/* ═══ DARK ═══════════════════════════════════════════════════════════════════
   Fox Blue puro es inusable acá: da 1.60:1 sobre el fondo, falla todo nivel de
   accesibilidad. El acento pasa a fox-200 (8.28:1, AAA) — sigue siendo el azul
   de la marca, solo aclarado. Las superficies llevan el hue 238° en vez de ser
   grises neutros, así el dark también se ve "de la marca".
   Nada de esto redefine los tokens de marca: solo los semánticos.
   ═════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --rs-accent:       var(--rs-fox-200);
  --rs-accent-hover: var(--rs-fox-100);
  --rs-on-accent:    var(--rs-fox-900);

  --rs-bg:           #151621;
  --rs-surface:      #1c1e2e;
  --rs-surface-2:    #252840;

  --rs-text:         var(--rs-selago);   /* 15.73:1 sobre el fondo */
  --rs-text-muted:   #b8bcd9;            /*  9.61:1 */

  --rs-border:       color-mix(in srgb, var(--rs-accent) 16%, transparent);
  --rs-border-soft:  color-mix(in srgb, var(--rs-accent) 10%, transparent);

  --rs-error:        #ff7a6e;
  --rs-success:      #4ade80;
  --rs-warn:         #fbbf24;

  /* Roles aclarados: mismos hues, subidos para contrastar sobre superficie oscura */
  --rs-rol-admin:      #9294e8;
  --rs-rol-comercial:  #92bae8;
  --rs-rol-arquitecto: #b294e6;
  --rs-rol-finanzas:   #92d7e8;

  --rs-grad-brand:   linear-gradient(135deg, var(--rs-fox-700) 0%, var(--rs-fox-900) 100%);
  --rs-grad-hero:    linear-gradient(135deg, var(--rs-fox-800) 0%, var(--rs-fox-900) 55%, #0d0f1a 100%);
  --rs-grad-soft:    linear-gradient(135deg, var(--rs-fox-600) 0%, var(--rs-fox-900) 100%);

  --rs-shadow-sm: 0 1px 12px rgba(0,0,0,.4);
  --rs-shadow:    0 2px 12px rgba(0,0,0,.35);
  --rs-shadow-md: 0 4px 20px rgba(0,0,0,.45);
  --rs-shadow-lg: 0 20px 60px rgba(0,0,0,.55);
}