/* ============================================================
   SEUUSS — Design Tokens (Variables CSS)
   Paleta institucional: Carrubio, Dorado, Blanco, Negro
   ============================================================ */

:root {
    /* ── Paleta Principal (Carrubio / Caoba) ── */
    --color-primary-900: #3D1A0A;
    --color-primary-800: #5C2710;
    --color-primary-700: #7A3516;
    --color-primary-600: #8B4513;
    --color-primary-500: #A0522D;
    --color-primary-400: #B8733D;
    --color-primary-300: #CD8B52;
    --color-primary-200: #E0B088;
    --color-primary-100: #F0D4B8;
    --color-primary-50:  #FBF0E5;

    /* ── Dorado / Acento ── */
    --color-gold-600: #9B7A1C;
    --color-gold-500: #C5960C;
    --color-gold-400: #DAA520;
    --color-gold-300: #E8C252;
    --color-gold-200: #F2D98A;
    --color-gold-100: #FAF0C8;

    /* ── Neutros ── */
    --color-black:    #0A0A0A;
    --color-gray-900: #1A1A1A;
    --color-gray-800: #2D2D2D;
    --color-gray-700: #404040;
    --color-gray-600: #555555;
    --color-gray-500: #777777;
    --color-gray-400: #999999;
    --color-gray-300: #BBBBBB;
    --color-gray-200: #D9D9D9;
    --color-gray-100: #EEEEEE;
    --color-gray-50:  #F7F7F7;
    --color-white:    #FFFFFF;

    /* ── Semánticos ── */
    --color-success: #2E7D32;
    --color-success-light: #E8F5E9;
    --color-warning: #ED6C02;
    --color-warning-light: #FFF3E0;
    --color-error:   #D32F2F;
    --color-error-light: #FFEBEE;
    --color-info:    #0288D1;
    --color-info-light: #E1F5FE;

    /* ── Gradientes ── */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-500) 50%, var(--color-gold-500) 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--color-primary-900) 0%, var(--color-primary-700) 100%);
    --gradient-header:  linear-gradient(90deg, var(--color-primary-800) 0%, var(--color-primary-600) 100%);
    --gradient-gold:    linear-gradient(135deg, var(--color-gold-500) 0%, var(--color-gold-300) 100%);
    --gradient-dark:    linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-primary-900) 100%);

    /* ── Tipografía ── */
    --font-primary: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --font-normal:   400;
    --font-medium:   500;
    --font-semibold: 600;
    --font-bold:     700;

    /* ── Espaciado ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Bordes ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 50%;

    /* ── Sombras ── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.12);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg:  0 8px 30px rgba(0,0,0,0.20);
    --shadow-xl:  0 12px 40px rgba(0,0,0,0.25);
    --shadow-gold: 0 4px 20px rgba(197,150,12,0.3);

    /* ── Transiciones ── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 70px;
    --header-height:     64px;
    --z-sidebar:  100;
    --z-header:   200;
    --z-modal:    1000;
    --z-toast:    1100;
}