/* ============================================================
   TRILION PROJECT HUB — Design Tokens
   "Singular. Sofisticação. Sensações."
   ============================================================ */

:root {
    /* ── Core Palette ─────────────────────────────────── */
    --trilion-black:        #0A0A0A;
    --trilion-dark:         #141414;
    --trilion-surface:      #1E1E1E;
    --trilion-border:       #2A2A2A;
    --trilion-border-light: #333333;

    /* ── Gold Spectrum ────────────────────────────────── */
    --trilion-gold:         #C8A04A;
    --trilion-gold-light:   #E8C96A;
    --trilion-gold-dark:    #A68435;
    --trilion-gold-glow:    rgba(200, 160, 74, 0.15);
    --trilion-gold-glow-md: rgba(200, 160, 74, 0.25);
    --trilion-gold-glow-lg: rgba(200, 160, 74, 0.35);

    /* ── Text ─────────────────────────────────────────── */
    --trilion-white:        #F5F5F7;
    --trilion-gray:         #86868B;
    --trilion-gray-light:   #AEAEB2;
    --trilion-gray-dark:    #636366;
    --trilion-text-muted:   #48484A;

    /* ── Semantic ─────────────────────────────────────── */
    --trilion-success:      #30D158;
    --trilion-success-bg:   rgba(48, 209, 88, 0.12);
    --trilion-warning:      #FFD60A;
    --trilion-warning-bg:   rgba(255, 214, 10, 0.12);
    --trilion-danger:       #FF453A;
    --trilion-danger-bg:    rgba(255, 69, 58, 0.12);
    --trilion-info:         #64D2FF;
    --trilion-info-bg:      rgba(100, 210, 255, 0.12);

    /* ── Typography ───────────────────────────────────── */
    --font-title:    'Outfit', sans-serif;
    --font-body:     'DM Sans', sans-serif;
    --font-mono:     'JetBrains Mono', monospace;

    --text-xs:   0.6875rem;   /* 11px */
    --text-sm:   0.8125rem;   /* 13px */
    --text-base: 0.875rem;    /* 14px */
    --text-md:   0.9375rem;   /* 15px */
    --text-lg:   1.125rem;    /* 18px */
    --text-xl:   1.375rem;    /* 22px */
    --text-2xl:  1.75rem;     /* 28px */
    --text-3xl:  2.25rem;     /* 36px */

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ── Spacing Scale ────────────────────────────────── */
    --space-0:   0;
    --space-px:  1px;
    --space-0-5: 2px;
    --space-1:   4px;
    --space-1-5: 6px;
    --space-2:   8px;
    --space-2-5: 10px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;

    /* ── Border Radius ────────────────────────────────── */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   20px;
    --radius-full:  9999px;

    /* ── Shadows ──────────────────────────────────────── */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-gold:  0 0 20px var(--trilion-gold-glow);
    --shadow-gold-md: 0 0 30px var(--trilion-gold-glow-md);
    --shadow-gold-lg: 0 4px 40px var(--trilion-gold-glow-lg);
    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);

    /* ── Transitions ──────────────────────────────────── */
    --ease-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:    cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-fast:  150ms var(--ease-out);
    --transition-base:  300ms var(--ease-out);
    --transition-slow:  500ms var(--ease-out);
    --transition-spring: 400ms var(--ease-spring);

    /* ── Z-Index Scale ────────────────────────────────── */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   400;
    --z-modal:     500;
    --z-popover:   600;
    --z-toast:     900;
    --z-max:       9999;

    /* ── Layout ───────────────────────────────────────── */
    --sidebar-width:     190px; /* padrao 260 */
    --sidebar-collapsed: 72px;
    --header-height:     64px;
    --content-max-width: 1400px;
    --content-padding:   var(--space-8);

    /* ── Glass / Overlay ──────────────────────────────── */
    --glass-bg:      rgba(20, 20, 20, 0.80);
    --glass-bg-dark: rgba(10, 10, 10, 0.90);
    --glass-blur:    blur(20px);
    --glass-blur-sm: blur(10px);
    --overlay-bg:    rgba(0, 0, 0, 0.65);

    /* ── Theme Transition ────────────────────────────── */
    --theme-transition: background-color 0.4s var(--ease-out),
                        color 0.4s var(--ease-out),
                        border-color 0.4s var(--ease-out),
                        box-shadow 0.4s var(--ease-out),
                        fill 0.4s var(--ease-out),
                        stroke 0.4s var(--ease-out);
}

/* ════════════════════════════════════════════════════════
   LIGHT THEME — "Trilion Light Luxury"
   Ativado via [data-theme="light"] no <html>
   ════════════════════════════════════════════════════════ */
[data-theme="light"] {
    /* ── Core Palette (invertido elegante) ────────────── */
    --trilion-black:        #F8F8FA;
    --trilion-dark:         #FFFFFF;
    --trilion-surface:      #F0F0F3;
    --trilion-border:       #E0E0E4;
    --trilion-border-light: #D0D0D6;

    /* ── Gold Spectrum (mais quente/saturado no light) ── */
    --trilion-gold:         #B08930;
    --trilion-gold-light:   #C8A04A;
    --trilion-gold-dark:    #8A6B1E;
    --trilion-gold-glow:    rgba(176, 137, 48, 0.10);
    --trilion-gold-glow-md: rgba(176, 137, 48, 0.18);
    --trilion-gold-glow-lg: rgba(176, 137, 48, 0.25);

    /* ── Text (escuro para contraste) ────────────────── */
    --trilion-white:        #1A1A1E;
    --trilion-gray:         #6B6B73;
    --trilion-gray-light:   #53535A;
    --trilion-gray-dark:    #8E8E96;
    --trilion-text-muted:   #A0A0A8;

    /* ── Semantic (mais vibrant para fundo claro) ────── */
    --trilion-success:      #1BA049;
    --trilion-success-bg:   rgba(27, 160, 73, 0.10);
    --trilion-warning:      #D4A800;
    --trilion-warning-bg:   rgba(212, 168, 0, 0.10);
    --trilion-danger:       #E03328;
    --trilion-danger-bg:    rgba(224, 51, 40, 0.10);
    --trilion-info:         #0A8FCC;
    --trilion-info-bg:      rgba(10, 143, 204, 0.10);

    /* ── Shadows (mais suaves, sem preto pesado) ─────── */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm:    0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.14);
    --shadow-gold:  0 0 24px rgba(176, 137, 48, 0.15);
    --shadow-gold-md: 0 0 32px rgba(176, 137, 48, 0.20);
    --shadow-gold-lg: 0 4px 48px rgba(176, 137, 48, 0.25);
    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.06);

    /* ── Glass / Overlay (claro) ─────────────────────── */
    --glass-bg:      rgba(255, 255, 255, 0.85);
    --glass-bg-dark: rgba(248, 248, 250, 0.92);
    --overlay-bg:    rgba(0, 0, 0, 0.35);
}

/* Scrollbar light override */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--trilion-surface);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--trilion-border-light);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--trilion-gold);
}

/* Avatar initials: manter gold bg com texto escuro no light */
[data-theme="light"] .avatar-initials {
    background: var(--trilion-gold);
    color: #FFFFFF;
}

/* Sidebar active nav item: fundo mais visivel no light */
[data-theme="light"] .nav-item.active {
    background: rgba(176, 137, 48, 0.12);
}

/* Badges: garantir legibilidade no light */
[data-theme="light"] .badge-gold {
    background: rgba(176, 137, 48, 0.12);
    color: var(--trilion-gold-dark);
}

/* Stat cards no light */
[data-theme="light"] .stat-card-icon {
    background: rgba(176, 137, 48, 0.08);
}

/* Table header no light */
[data-theme="light"] .table-trilion thead th {
    background: var(--trilion-surface);
    color: var(--trilion-gray);
}
[data-theme="light"] .table-trilion tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .table-trilion tbody tr:hover {
    background: rgba(176, 137, 48, 0.06);
}

/* Buttons primary: texto branco no light (gold escuro bg) */
[data-theme="light"] .btn-primary {
    background: var(--trilion-gold);
    color: #FFFFFF;
}
[data-theme="light"] .btn-primary:hover {
    background: var(--trilion-gold-dark);
    color: #FFFFFF;
}

/* Cards no light: sombra sutil em vez de borda pesada */
[data-theme="light"] .card {
    box-shadow: var(--shadow-sm);
}

/* Dropdown menus */
[data-theme="light"] .dropdown-menu {
    background: #FFFFFF;
    box-shadow: var(--shadow-lg);
}

/* Modal */
[data-theme="light"] .modal {
    background: #FFFFFF;
    box-shadow: var(--shadow-xl);
}

/* Toast */
[data-theme="light"] .toast {
    background: #FFFFFF;
    box-shadow: var(--shadow-lg);
}

/* Form controls focus ring */
[data-theme="light"] .form-control:focus {
    box-shadow: 0 0 0 3px rgba(176, 137, 48, 0.20);
}

/* Kanban columns */
[data-theme="light"] .kanban-column {
    background: var(--trilion-surface);
}

/* Code/pre blocks */
[data-theme="light"] code {
    background: rgba(176, 137, 48, 0.08);
    color: var(--trilion-gold-dark);
}

/* Progress bars: manter gradiente gold visivel */
[data-theme="light"] .progress-fill {
    background: linear-gradient(90deg, var(--trilion-gold-dark), var(--trilion-gold));
}

/* Login page override */
[data-theme="light"] .auth-layout {
    background: linear-gradient(135deg, #F0F0F3 0%, #E8E8EC 50%, #F0EDE6 100%);
}
[data-theme="light"] .login-card {
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
}