/* ════════════════════════════════════════════════════════════════════════════
   tokens.css — FUENTE ÚNICA de los tokens de runtime (P12-C1 · triplete P12-C2).
   El hex/rgba vive SOLO acá (regla §8 enmendada). Lo cargan AMBAS superficies:
   el blade surface (<link> antes de @vite) y el panel Filament (renderHook).
   Es la base de la semilla de skins de P12: cambiar un valor acá re-tematiza
   pública + panel sin tocar componentes.

   Colores sólidos = CANALES RGB ("R G B", P12-C2) para habilitar opacity-modifiers
   (bg-primary/10, from-primary/10, etc.): tailwind.config los mapea con
   rgb(var(--x) / <alpha-value>). Consumir SIEMPRE via utility o rgb(var(--x));
   NUNCA `color: var(--x)` directo (no es color válido — es un triplete).
   Bordes y shadows quedan como rgba/compuestos (no se opacity-modifican).

   Dark = default (:root). data-theme="light" = override de los MISMOS tokens.
   El panel Filament togglea dark por CLASE .dark; el panel-theme espeja esa
   clase a data-theme, así ambos sistemas resuelven contra este único set.
   Naming 100% semántico por rol — nunca por hue (nada de --amber).
   ════════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme='dark'] {
    color-scheme: dark;

    /* Marca (canales RGB) */
    --color-primary: 245 158 11;   /* #f59e0b */
    --color-danger: 220 38 38;     /* #dc2626 */
    --color-success: 16 185 129;   /* #10b981 */
    --color-info: 96 165 250;      /* #60a5fa — estado "programado/futuro" (azul más claro sobre dark) */

    /* Superficies */
    --surface-base: 10 10 10;      /* #0a0a0a */
    --surface-elevated: 23 23 23;  /* #171717 */

    /* Texto */
    --text-default: 237 237 237;   /* #ededed */
    --text-muted: 163 163 163;     /* #a3a3a3 */
    --text-dim: 107 107 107;       /* #6b6b6b */

    /* Bordes — hairline sobre dark (rgba compuesto, no triplete) */
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);

    /* Elevación dark = superficie + hairline (sin drop-shadow pesado) */
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-modal: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 48px -12px rgba(0, 0, 0, 0.60);
}

[data-theme='light'] {
    color-scheme: light;

    /* Marca — mismo hue en ambos temas */
    --color-primary: 245 158 11;   /* #f59e0b */
    --color-danger: 220 38 38;     /* #dc2626 */
    --color-success: 16 185 129;   /* #10b981 */
    --color-info: 37 99 235;       /* #2563eb — azul más oscuro sobre light (contraste, como el diseño) */

    /* Superficies invertidas */
    --surface-base: 250 250 250;   /* #fafafa */
    --surface-elevated: 255 255 255; /* #ffffff */

    /* Texto */
    --text-default: 23 23 23;      /* #171717 */
    --text-muted: 82 82 82;        /* #525252 */
    --text-dim: 138 138 138;       /* #8a8a8a */

    /* Bordes sobre light */
    --border-default: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);

    /* Light = sombra suave funcional */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-modal: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}