/*
 * Gradify Design Tokens
 * Loaded globally via index.html but only consumed by Gradify components.
 * Do NOT use these to restyle existing unrelated pages.
 */

:root {
    /* =====================================================
       COLORS
       ===================================================== */

    --g-bg-page:            #f0f2f8;
    --g-bg-surface:         #ffffff;
    --g-bg-input:           #f8fafc;
    --g-bg-hover:           #f5f6ff;

    --g-border:             #e2e8f0;
    --g-border-light:       #f1f5f9;

    --g-text-primary:       #1e293b;
    --g-text-secondary:     #64748b;
    --g-text-muted:         #94a3b8;

    --g-accent:             #6366f1;
    --g-accent-light:       #eef2ff;
    /* Active nav item background — light, visible, not dark */
    --g-accent-active-bg:   #d4d8fa;
    --g-accent-hover:       #4f46e5;

    --g-danger:             #ef4444;

    /* =====================================================
       SHADOWS
       ===================================================== */

    --g-shadow-sm:          0 1px 4px rgba(0, 0, 0, 0.06);
    --g-shadow-md:          0 4px 20px rgba(0, 0, 0, 0.08);
    --g-shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* =====================================================
       BORDER RADIUS
       ===================================================== */

    --g-radius-sm:          8px;
    --g-radius-md:          12px;
    --g-radius-lg:          20px;    /* main panel radius */
    --g-radius-full:        9999px;

    /* =====================================================
       SPACING
       ===================================================== */

    --g-space-xs:           4px;
    --g-space-sm:           8px;
    --g-space-md:           16px;
    --g-space-lg:           24px;
    --g-space-xl:           32px;

    /* =====================================================
       LAYOUT
       ===================================================== */

    --g-sidebar-width:      280px;
    --g-shell-padding:      12px;

    /* =====================================================
       TYPOGRAPHY — font family
       ===================================================== */

    --g-font-base:          'Assistant', sans-serif;

    /* =====================================================
       TYPOGRAPHY — semantic type scale
       Apply consistently across sidebar, topbar, cards.
       ===================================================== */

    --g-type-page-title:    32px;   /* Page title — bold  */
    --g-type-section:       28px;   /* Section title — bold */
    --g-type-card:          24px;   /* Card title — bold  */
    --g-type-subtitle:      20px;   /* Sub-title — bold   */
    --g-type-body:          20px;   /* Body text — regular */
    --g-type-secondary:     16px;   /* Secondary text — regular */

    /* Legacy size aliases — kept so existing code doesn't break.
       Prefer the semantic tokens above for new code. */
    --g-font-size-xs:       11px;
    --g-font-size-sm:       14px;
    --g-font-size-md:       16px;
    --g-font-size-lg:       20px;
    --g-font-size-xl:       32px;

    /* Nav item fixed height — every row the same */
    --g-nav-item-height:    48px;
}

/* ============================================================
   DARK MODE
   Applied when:
     - explicit: [data-theme="dark"] on <html>
     - system:   prefers-color-scheme: dark AND no [data-theme="light"]
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --g-bg-page:          #0f172a;
        --g-bg-surface:       #1e293b;
        --g-bg-input:         #162032;
        --g-bg-hover:         #263354;

        --g-border:           #334155;
        --g-border-light:     #1e293b;

        --g-text-primary:     #f1f5f9;
        --g-text-secondary:   #94a3b8;
        --g-text-muted:       #64748b;

        --g-accent:           #818cf8;
        --g-accent-light:     #1e1b4b;
        --g-accent-active-bg: #312e81;
        --g-accent-hover:     #6366f1;

        --g-danger:           #f87171;

        --g-shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.30);
        --g-shadow-md:        0 4px 20px rgba(0, 0, 0, 0.40);
        --g-shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);

        color-scheme: dark;
    }
}

/* Explicit dark always wins regardless of system preference */
[data-theme="dark"] {
    --g-bg-page:          #0f172a;
    --g-bg-surface:       #1e293b;
    --g-bg-input:         #162032;
    --g-bg-hover:         #263354;

    --g-border:           #334155;
    --g-border-light:     #1e293b;

    --g-text-primary:     #f1f5f9;
    --g-text-secondary:   #94a3b8;
    --g-text-muted:       #64748b;

    --g-accent:           #818cf8;
    --g-accent-light:     #1e1b4b;
    --g-accent-active-bg: #312e81;
    --g-accent-hover:     #6366f1;

    --g-danger:           #f87171;

    --g-shadow-sm:        0 1px 4px rgba(0, 0, 0, 0.30);
    --g-shadow-md:        0 4px 20px rgba(0, 0, 0, 0.40);
    --g-shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30);

    color-scheme: dark;
}