/*
 * Design tokens. Every colour, space, radius, shadow and duration in the product resolves
 * to something declared here, so a change to the brand is a change to this file only.
 */
:root {
    /* ---- Surfaces -------------------------------------------------------- */
    --app-bg: #F5F6FA;
    --surface: #FFFFFF;
    --surface-sunken: #EFF1F7;
    --surface-raised: #FFFFFF;
    --surface-inverse: #0F172A;

    /* ---- Text ------------------------------------------------------------ */
    --text: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    --text-subtle: #94A3B8;
    --text-on-accent: #FFFFFF;

    /* ---- Lines ----------------------------------------------------------- */
    --border: #E4E7F0;
    --border-strong: #CBD2E1;
    --border-focus: #6366F1;

    /* ---- The one accent -------------------------------------------------- */
    --accent-50: #EEF0FF;
    --accent-100: #E0E3FF;
    --accent-200: #C7CBFE;
    --accent-400: #7B7FF6;
    --accent: #4F46E5;
    --accent-600: #4338CA;
    --accent-700: #3730A3;
    --accent-contrast: #FFFFFF;

    /* Used only for AI surfaces, the primary CTA, progress and selected nav. */
    --gradient-accent: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --gradient-accent-soft: linear-gradient(135deg, #EEF0FF 0%, #F3EEFF 100%);
    --gradient-ai: linear-gradient(120deg, #4F46E5 0%, #6D5AE6 45%, #7C3AED 100%);

    /* ---- Status: never the only signal, always paired with text or icon --- */
    --success: #0E9F6E;
    --success-bg: #E6F6F0;
    --success-border: #A7E3CE;

    --warning: #B45309;
    --warning-bg: #FDF4E3;
    --warning-border: #F3D9A4;

    --danger: #DC2626;
    --danger-bg: #FDECEC;
    --danger-border: #F5BDBD;

    --info: #0369A1;
    --info-bg: #E8F3FA;
    --info-border: #A9D3EA;

    --neutral-chip-bg: #F1F3F9;
    --neutral-chip-text: #475569;

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

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

    --text-xs: 0.75rem;      /* 12px - chips and meta only, never body copy */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.9375rem;  /* 15px - body */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.25;
    --leading-snug: 1.4;
    --leading-normal: 1.6;

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

    /* ---- Radius ---------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-input: 12px;
    --radius-button: 12px;
    --radius-card: 16px;
    --radius-lg: 20px;
    --radius-sheet: 22px;
    --radius-pill: 999px;

    /* ---- Shadows: soft, minimal, never more than three ------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-accent: 0 4px 14px rgba(79, 70, 229, 0.24);
    --shadow-sheet: 0 -8px 32px rgba(15, 23, 42, 0.14);

    /* ---- Motion: 150-300ms, nothing showy -------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;

    /* ---- Layout ---------------------------------------------------------- */
    --sidebar-width: 248px;
    --sidebar-width-compact: 76px;
    --topbar-height: 60px;
    --bottomnav-height: 62px;
    --content-max: 1180px;
    --tap-target: 44px;

    /* ---- Z-index ladder -------------------------------------------------- */
    --z-sticky: 20;
    --z-sidebar: 30;
    --z-topbar: 35;
    --z-fab: 40;
    --z-bottomnav: 45;
    --z-scrim: 50;
    --z-sheet: 55;
    --z-toast: 60;
}

/* Breakpoints are documented here because CSS cannot tokenise a media query.
   mobile   : 360-767px    single column, bottom nav, sheets
   tablet   : 768-1279px   compact icon rail, two columns where it earns it
   desktop  : 1280px+      full sidebar, multi-column                          */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-base: 1ms;
        --duration-slow: 1ms;
    }
}