/* ==========================================================================
   CGMS Design System - Tokens
   A single source of truth for colour, type, spacing, radius and elevation.
   Nothing in the application should hard-code these values.
   ========================================================================== */

:root {
    /* ---- Brand -------------------------------------------------------- */
    /* A restrained slate-indigo. Deliberately low-chroma so that status
       colours (success / warning / danger) stay the loudest thing on screen. */
    --brand-50: #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #5b5bd6;
    --brand-600: #4a4ac4;
    --brand-700: #3f3fa8;
    --brand-800: #35357f;
    --brand-900: #2c2c63;

    /* ---- Neutrals ----------------------------------------------------- */
    --neutral-0: #ffffff;
    --neutral-25: #fcfcfd;
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    /* ---- Status ------------------------------------------------------- */
    --success-50: #ecfdf5;
    --success-200: #a7f3d0;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;

    --warning-50: #fffbeb;
    --warning-200: #fde68a;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;

    --danger-50: #fef2f2;
    --danger-200: #fecaca;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    --info-50: #eff6ff;
    --info-200: #bfdbfe;
    --info-500: #3b82f6;
    --info-600: #2563eb;
    --info-700: #1d4ed8;

    /* ---- Semantic surfaces -------------------------------------------- */
    --color-bg: var(--neutral-100);
    --color-surface: var(--neutral-0);
    --color-surface-raised: var(--neutral-0);
    --color-surface-sunken: var(--neutral-50);
    --color-surface-hover: var(--neutral-50);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);

    --color-text: var(--neutral-800);
    --color-text-secondary: var(--neutral-600);
    --color-text-muted: var(--neutral-500);
    --color-text-inverse: var(--neutral-0);

    --color-primary: var(--brand-600);
    --color-primary-hover: var(--brand-700);
    --color-primary-soft: var(--brand-50);
    --color-focus: var(--brand-400);

    /* Sidebar reads as a distinct, calm dark rail in both themes. */
    --sidebar-bg: var(--neutral-900);
    --sidebar-text: #cbd5e1;
    --sidebar-text-muted: #7c8aa0;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(129, 140, 248, 0.16);
    --sidebar-active-text: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    /* ---- Typography ---------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 0.75rem;      /* 12px - helper text, table meta */
    --text-sm: 0.8125rem;    /* 13px - table body, labels */
    --text-base: 0.875rem;   /* 14px - body, inputs, buttons */
    --text-md: 0.9375rem;    /* 15px - card titles */
    --text-lg: 1.0625rem;    /* 17px - section titles */
    --text-xl: 1.25rem;      /* 20px - page titles */
    --text-2xl: 1.5rem;      /* 24px - KPI figures */
    --text-3xl: 1.875rem;    /* 30px - hero figures */

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

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

    /* ---- Spacing (4px scale) ------------------------------------------- */
    --space-0: 0;
    --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;

    /* ---- Radius -------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-full: 999px;

    /* ---- Elevation ------------------------------------------------------ */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
    --shadow-focus: 0 0 0 3px rgba(91, 91, 214, 0.22);

    /* ---- Layout --------------------------------------------------------- */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 72px;
    --topbar-height: 60px;
    --content-max: 1440px;

    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme: the viewer's OS preference, overridable by an explicit choice. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --color-bg: var(--neutral-950);
        --color-surface: #101827;
        --color-surface-raised: #16203180;
        --color-surface-sunken: #0b1220;
        --color-surface-hover: #1c2739;
        --color-border: #1f2a3c;
        --color-border-strong: #2c3a50;

        --color-text: #e2e8f0;
        --color-text-secondary: #a8b6c9;
        --color-text-muted: #7c8aa0;

        --color-primary: var(--brand-400);
        --color-primary-hover: var(--brand-300);
        --color-primary-soft: rgba(129, 140, 248, 0.12);

        --sidebar-bg: #0b1220;
        --sidebar-border: rgba(255, 255, 255, 0.06);

        --success-50: rgba(16, 185, 129, 0.12);
        --success-200: rgba(16, 185, 129, 0.35);
        --warning-50: rgba(245, 158, 11, 0.12);
        --warning-200: rgba(245, 158, 11, 0.35);
        --danger-50: rgba(239, 68, 68, 0.12);
        --danger-200: rgba(239, 68, 68, 0.35);
        --info-50: rgba(59, 130, 246, 0.12);
        --info-200: rgba(59, 130, 246, 0.35);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
    }
}

:root[data-theme='dark'] {
    --color-bg: var(--neutral-950);
    --color-surface: #101827;
    --color-surface-raised: #16203180;
    --color-surface-sunken: #0b1220;
    --color-surface-hover: #1c2739;
    --color-border: #1f2a3c;
    --color-border-strong: #2c3a50;

    --color-text: #e2e8f0;
    --color-text-secondary: #a8b6c9;
    --color-text-muted: #7c8aa0;

    --color-primary: var(--brand-400);
    --color-primary-hover: var(--brand-300);
    --color-primary-soft: rgba(129, 140, 248, 0.12);

    --sidebar-bg: #0b1220;
    --sidebar-border: rgba(255, 255, 255, 0.06);

    --success-50: rgba(16, 185, 129, 0.12);
    --success-200: rgba(16, 185, 129, 0.35);
    --warning-50: rgba(245, 158, 11, 0.12);
    --warning-200: rgba(245, 158, 11, 0.35);
    --danger-50: rgba(239, 68, 68, 0.12);
    --danger-200: rgba(239, 68, 68, 0.35);
    --info-50: rgba(59, 130, 246, 0.12);
    --info-200: rgba(59, 130, 246, 0.35);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
}