/* =====================================================
 * VGen Portal Design Tokens
 * Source of truth: docs/design_handoff_vgen_portal/prototype/src/tokens.js
 * Bir değer değiştirmek istiyorsan burada değiştir — inline hex yazma.
 * ===================================================== */

:root {
    /* ---------- Surfaces ---------- */
    --color-bg:             #F7F8FA;
    --color-surface:        #FFFFFF;
    --color-surface-alt:    #FBFBFD;
    /* Sidebar tokens are theme-aware: light-mode defaults here are light so the
       sidebar matches a light-mode page, and the dark-mode block (below) restores
       the near-black palette for dark-mode users. Prior versions hardcoded a
       dark sidebar in every mode, which left a light-content page with an
       always-dark rail and made the manual theme toggle feel broken. */
    --color-sidebar:        #FFFFFF;
    --color-sidebar-alt:    #F3F4F7;
    --color-sidebar-hover:  #EEEEFB;
    --color-border:         #E6E8EE;
    --color-border-strong:  #D4D7DF;
    --color-border-dark:    #E6E8EE;

    /* ---------- Text ---------- */
    --color-text:           #0E1116;
    --color-text-muted:     #5B6474;
    --color-text-soft:      #8A92A3;
    /* --color-text-inverted / --color-text-dark are sidebar-scoped and flip
       with the theme (dark text on a light sidebar, light text on a dark one). */
    --color-text-inverted:  #0E1116;
    --color-text-dark:      #5B6474;

    /* ---------- Brand ---------- */
    --color-brand:          #5B5BE6;
    --color-brand-hover:    #4949D4;
    --color-brand-soft:     #EEEEFB;
    --color-brand-text:     #3838BA;

    /* ---------- Accent gradient (hero only) ---------- */
    --color-grad-from:      #6366F1;
    --color-grad-to:        #8B5CF6;

    /* ---------- Semantic ---------- */
    --color-success:        #16A34A;
    --color-success-bg:     #E8F6EC;
    --color-success-border: #B7E0C2;

    --color-warning:        #D97706;
    --color-warning-bg:     #FEF3E2;
    --color-warning-border: #F5D6A4;

    --color-danger:         #DC2626;
    --color-danger-bg:      #FDECEC;
    --color-danger-border:  #F5B4B4;

    --color-info:           #0E7FBF;
    --color-info-bg:        #E3F2FB;
    --color-info-border:    #A9D4EC;

    /* ---------- Environment (prod/test) ---------- */
    --color-prod:           #DC2626;
    --color-prod-bg:        #FDECEC;
    --color-test:           #0891B2;
    --color-test-bg:        #DFF4F8;

    /* ---------- Radius ---------- */
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-lg:    8px;
    --radius-xl:    12px;
    --radius-pill:  999px;

    /* ---------- Shadow ---------- */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
    --shadow-xl: 0 24px 64px rgba(16, 24, 40, 0.18);

    /* ---------- Typography ---------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;

    /* ---------- Spacing (8px grid) ---------- */
    --sp-1:  4px;
    --sp-2:  6px;
    --sp-3:  8px;
    --sp-4:  10px;
    --sp-5:  12px;
    --sp-6:  14px;
    --sp-7:  16px;
    --sp-8:  20px;
    --sp-9:  24px;
    --sp-10: 32px;

    /* ---------- Layout ---------- */
    --sidebar-width:            248px;
    --sidebar-width-collapsed:  64px;
    --topbar-user-height:       38px;
    --topbar-tab-height:        42px;
    --topbar-height:            80px; /* user + tabs */
}

/* =====================================================
 * Dark mode (opt-in via system preference OR data-theme="dark")
 * Only remaps the surface + text + border + tone-bg tokens; brand,
 * semantic accents, radius, shadows, typography, and spacing stay the
 * same so every component gets dark treatment automatically.
 * ===================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surfaces */
        --color-bg:             #0B0D12;
        --color-surface:        #13161C;
        --color-surface-alt:    #181C23;
        /* Sidebar already dark; nudge slightly for separation */
        --color-sidebar:        #07090D;
        --color-sidebar-alt:    #0F1116;
        --color-sidebar-hover:  #1A1E27;
        --color-border:         #222733;
        --color-border-strong:  #2E3440;
        --color-border-dark:    #2E3440;

        /* Text */
        --color-text:           #E8EBF1;
        --color-text-muted:     #9AA3B5;
        --color-text-soft:      #6B7284;
        /* --color-text-inverted / --color-text-dark are sidebar-scoped, so in dark
           mode they stay LIGHT (readable on the near-black sidebar). */
        --color-text-inverted:  #F6F7FA;
        --color-text-dark:      #C8CCD6;

        /* Brand — stays indigo but soft-bg tinted darker */
        --color-brand-soft:     #22223E;
        --color-brand-text:     #B5B5FF;

        /* Semantic tone foregrounds lightened so text on the dark tone-bg tints
           stays readable. The saturated light-mode hues (#DC2626, #D97706,
           #0E7FBF, #16A34A) all went muddy on near-black backgrounds. */
        --color-success:        #4ADE80;
        --color-success-bg:     #0F2B1A;
        --color-success-border: #1F4A2E;

        --color-warning:        #FBBF24;
        --color-warning-bg:     #2B1D0A;
        --color-warning-border: #4A3A18;

        --color-danger:         #F87171;
        --color-danger-bg:      #2B0E0E;
        --color-danger-border:  #552020;

        --color-info:           #60A5FA;
        --color-info-bg:        #0E2332;
        --color-info-border:    #1C4060;

        --color-prod:           #F87171;
        --color-prod-bg:        #2B0E0E;
        --color-test:           #22D3EE;
        --color-test-bg:        #0E2A30;

        /* Shadows use a pure-black cast in dark so they remain visible */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
        --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65);
    }
}

/* Explicit data-theme="dark" overrides ignore OS preference (for a future toggle) */
:root[data-theme="dark"] {
    --color-bg:             #0B0D12;
    --color-surface:        #13161C;
    --color-surface-alt:    #181C23;
    --color-sidebar:        #07090D;
    --color-sidebar-alt:    #0F1116;
    --color-sidebar-hover:  #1A1E27;
    --color-border:         #222733;
    --color-border-strong:  #2E3440;
    --color-border-dark:    #2E3440;
    --color-text:           #E8EBF1;
    --color-text-muted:     #9AA3B5;
    --color-text-soft:      #6B7284;
    /* Sidebar-scoped text tokens: kept light here so they're readable on the
       dark-mode sidebar (--color-sidebar: #07090D). */
    --color-text-inverted:  #F6F7FA;
    --color-text-dark:      #C8CCD6;
    --color-brand-soft:     #22223E;
    --color-brand-text:     #B5B5FF;
    --color-success:        #4ADE80;
    --color-success-bg:     #0F2B1A;
    --color-success-border: #1F4A2E;
    --color-warning:        #FBBF24;
    --color-warning-bg:     #2B1D0A;
    --color-warning-border: #4A3A18;
    --color-danger:         #F87171;
    --color-danger-bg:      #2B0E0E;
    --color-danger-border:  #552020;
    --color-info:           #60A5FA;
    --color-info-bg:        #0E2332;
    --color-info-border:    #1C4060;
    --color-prod:           #F87171;
    --color-prod-bg:        #2B0E0E;
    --color-test:           #22D3EE;
    --color-test-bg:        #0E2A30;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65);
}