/* ============================================================
   DON ALE — SISTEMA DE TOKENS (tokens.css)
   Modo Día / Modo Noche con WCAG AA Certificado
   ============================================================ */

:root, [data-theme="dark"] {
    /* Superficies & Fondos (Dark Abyssal) */
    --bg-base: #080D18;
    --bg-surface: rgba(15, 23, 42, 0.72);
    --bg-surface-solid: #0F172A;
    --bg-surface-elevated: rgba(30, 41, 59, 0.75);
    --bg-card: rgba(15, 23, 42, 0.65);
    --bg-header: rgba(8, 13, 24, 0.85);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-active: rgba(249, 115, 22, 0.12);
    --bg-input: rgba(15, 23, 42, 0.6);

    /* Bordes & Separadores */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-hover: rgba(249, 115, 22, 0.45);
    --border-focus: #0EA5E9;

    /* Textos & Tipografía (WCAG AAA / AA) */
    --text-primary: #F8FAFC;      /* Contraste 16.5:1 */
    --text-secondary: #94A3B8;    /* Contraste 5.8:1 */
    --text-muted: #64748B;
    --text-inverse: #0F172A;

    /* Acentos Piscícolas & Semántica */
    --accent-orange: #F97316;     /* Tangerine Alevinos */
    --accent-orange-hover: #EA580C;
    --accent-orange-glow: rgba(249, 115, 22, 0.2);
    --accent-blue: #0EA5E9;       /* Bio-Aqua */
    --accent-blue-subtle: rgba(14, 165, 233, 0.12);
    --accent-green: #10B981;      /* Cierre / En línea */
    --accent-green-subtle: rgba(16, 185, 129, 0.12);
    --accent-red: #EF4444;        /* Caliente / Alerta */
    --accent-red-subtle: rgba(239, 68, 68, 0.12);
    --accent-amber: #F59E0B;      /* Tibio / Advertencia */
    --accent-amber-subtle: rgba(245, 158, 11, 0.12);
    --accent-purple: #8B5CF6;

    /* Sombras & Elevaciones */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 20px 40px -10px rgba(0, 0, 0, 0.85);

    /* Gradientes */
    --gradient-brand: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    --gradient-mesh: radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 45%),
                     radial-gradient(circle at bottom left, rgba(249, 115, 22, 0.05), transparent 40%),
                     #080D18;
}

[data-theme="light"] {
    /* Superficies & Fondos (Crisp Clean Aquafarm) */
    --bg-base: #F4F6F9;
    --bg-surface: rgba(255, 255, 255, 0.88);
    --bg-surface-solid: #FFFFFF;
    --bg-surface-elevated: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-header: rgba(244, 246, 249, 0.88);
    --bg-hover: rgba(15, 23, 42, 0.04);
    --bg-active: rgba(234, 88, 12, 0.1);
    --bg-input: #FFFFFF;

    /* Bordes & Separadores */
    --border-subtle: rgba(15, 23, 42, 0.09);
    --border-medium: rgba(15, 23, 42, 0.16);
    --border-hover: rgba(234, 88, 12, 0.5);
    --border-focus: #0284C7;

    /* Textos & Tipografía (WCAG AAA / AA) */
    --text-primary: #0F172A;      /* Contraste 18.2:1 */
    --text-secondary: #475569;    /* Contraste 6.4:1 */
    --text-muted: #64748B;
    --text-inverse: #F8FAFC;

    /* Acentos Piscícolas & Semántica Calibrados para Luz */
    --accent-orange: #EA580C;
    --accent-orange-hover: #C2410C;
    --accent-orange-glow: rgba(234, 88, 12, 0.15);
    --accent-blue: #0284C7;
    --accent-blue-subtle: rgba(2, 132, 199, 0.08);
    --accent-green: #059669;
    --accent-green-subtle: rgba(5, 150, 105, 0.08);
    --accent-red: #DC2626;
    --accent-red-subtle: rgba(220, 38, 38, 0.08);
    --accent-amber: #D97706;
    --accent-amber-subtle: rgba(217, 119, 6, 0.08);
    --accent-purple: #7C3AED;

    /* Sombras & Elevaciones */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-card: 0 4px 14px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    --shadow-modal: 0 20px 30px -10px rgba(15, 23, 42, 0.15), 0 8px 12px -4px rgba(15, 23, 42, 0.08);

    /* Gradientes */
    --gradient-brand: linear-gradient(135deg, #EA580C 0%, #F97316 100%);
    --gradient-mesh: radial-gradient(circle at top right, rgba(2, 132, 199, 0.06), transparent 45%),
                     radial-gradient(circle at bottom left, rgba(234, 88, 12, 0.04), transparent 40%),
                     #F4F6F9;
}

/* Tokens Universales (Independientes del Tema) */
:root {
    --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

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

    --sidebar-width: 250px;
    --header-height: 64px;
}