/* ==========================================================================
   GO7 design tokens
   Dark-first, with a light theme that swaps only the surface/ink ramps.
   Everything downstream references these variables — no raw hex in components.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* ── Surface ramp (dark) ───────────────────────────────────────────── */
    --bg-canvas:      #08090d;   /* page background                        */
    --bg-base:        #0d0f14;   /* app shell                              */
    --bg-surface:     #12151c;   /* cards, panels                          */
    --bg-raised:      #171b23;   /* menus, popovers, hovered rows          */
    --bg-inset:       #0a0c11;   /* inputs, wells                          */
    --bg-overlay:     rgba(4, 5, 8, .72);

    /* ── Ink ramp ──────────────────────────────────────────────────────── */
    --ink-strong:     #f2f4f8;
    --ink:            #d7dbe4;
    --ink-muted:      #8f97a6;
    --ink-faint:      #626a79;
    --ink-inverse:    #0b0d12;

    /* ── Lines ─────────────────────────────────────────────────────────── */
    --line:           #1e222c;
    --line-strong:    #2a2f3b;
    --line-focus:     #4a5bd4;

    /* ── Brand ─────────────────────────────────────────────────────────── */
    --brand:          #6d7cff;
    --brand-hover:    #7f8cff;
    --brand-active:   #5c6bf0;
    --brand-soft:     rgba(109, 124, 255, .14);
    --brand-line:     rgba(109, 124, 255, .38);
    --brand-ink:      #ffffff;

    --accent:         #f5a524;
    --accent-soft:    rgba(245, 165, 36, .14);

    /* ── Status ────────────────────────────────────────────────────────── */
    --ok:             #34d399;
    --ok-soft:        rgba(52, 211, 153, .13);
    --warn:           #fbbf24;
    --warn-soft:      rgba(251, 191, 36, .13);
    --danger:         #f87171;
    --danger-soft:    rgba(248, 113, 113, .13);
    --info:           #38bdf8;
    --info-soft:      rgba(56, 189, 248, .13);

    /* ── Data-viz sequence (accessible on both themes) ─────────────────── */
    --viz-1: #6d7cff;
    --viz-2: #34d399;
    --viz-3: #f5a524;
    --viz-4: #f87171;
    --viz-5: #38bdf8;
    --viz-6: #c084fc;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Manrope', var(--font-sans);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-2xs: .6875rem;   /* 11 */
    --text-xs:  .75rem;     /* 12 */
    --text-sm:  .8125rem;   /* 13 */
    --text-md:  .875rem;    /* 14 — base UI size */
    --text-lg:  1rem;       /* 16 */
    --text-xl:  1.125rem;   /* 18 */
    --text-2xl: 1.375rem;   /* 22 */
    --text-3xl: 1.75rem;    /* 28 */
    --text-4xl: 2.25rem;    /* 36 */
    --text-5xl: 3rem;       /* 48 */

    /* ── Space (4px base) ──────────────────────────────────────────────── */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

    /* ── Radius ────────────────────────────────────────────────────────── */
    --r-xs: 4px;  --r-sm: 6px;  --r-md: 9px;  --r-lg: 12px;
    --r-xl: 16px; --r-2xl: 22px; --r-full: 999px;

    /* ── Elevation ─────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, .55);
    --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .65);
    --shadow-ring: 0 0 0 3px rgba(109, 124, 255, .22);

    /* ── Motion ────────────────────────────────────────────────────────── */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur-fast: 110ms;
    --dur: 180ms;
    --dur-slow: 320ms;

    /* ── Layout ────────────────────────────────────────────────────────── */
    --sidebar-w: 244px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 56px;
    --container: 1240px;
}

[data-theme='light'] {
    color-scheme: light;

    --bg-canvas:  #f6f7f9;
    --bg-base:    #ffffff;
    --bg-surface: #ffffff;
    --bg-raised:  #ffffff;
    --bg-inset:   #f2f4f7;
    --bg-overlay: rgba(15, 18, 25, .38);

    --ink-strong: #0d1117;
    --ink:        #2c333f;
    --ink-muted:  #626b7a;
    --ink-faint:  #8b93a1;
    --ink-inverse:#ffffff;

    --line:        #e3e7ed;
    --line-strong: #cfd5de;

    --brand-soft: rgba(109, 124, 255, .10);
    --brand-line: rgba(109, 124, 255, .30);

    --ok-soft:     rgba(16, 150, 105, .12);
    --warn-soft:   rgba(217, 145, 6, .13);
    --danger-soft: rgba(220, 60, 60, .11);
    --info-soft:   rgba(12, 150, 210, .12);

    --ok:     #0f9d68;
    --warn:   #b8790a;
    --danger: #d64545;
    --info:   #0c8fd0;

    --shadow-sm: 0 1px 2px rgba(15, 22, 36, .07);
    --shadow-md: 0 8px 24px -10px rgba(15, 22, 36, .18);
    --shadow-lg: 0 28px 56px -20px rgba(15, 22, 36, .24);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}