/* ==========================================================================
   Design Tokens v1.0 — Global token system
   Extends sidebar-redesign.css :root tokens
   ========================================================================== */

:root {
    /* ---- Spacing (8px grid) ---- */
    --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;

    /* ---- Typography ---- */
    --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 20px;
    --fs-3xl: 24px;

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.625;

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

    /* ---- Semantic colors (primary = sidebar accent) ---- */
    --color-primary: #6366F1;
    --color-primary-hover: #4F46E5;
    --color-primary-light: #818CF8;
    --color-primary-bg: #EEF2FF;

    --color-success: #10B981;
    --color-success-bg: #ECFDF5;
    --color-success-border: #A7F3D0;

    --color-warning: #F59E0B;
    --color-warning-bg: #FFFBEB;
    --color-warning-border: #FDE68A;

    --color-danger: #EF4444;
    --color-danger-bg: #FEF2F2;
    --color-danger-border: #FECACA;

    --color-info: #3B82F6;
    --color-info-bg: #EFF6FF;
    --color-info-border: #BFDBFE;

    --color-neutral-bg: #F3F4F6;
    --color-neutral-border: #D1D5DB;

    /* ---- Gray scale ---- */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -2px rgba(0, 0, 0, 0.03);

    /* ---- Radius ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ---- Shell: Steel neutrals ---- */
    --steel-50:  #F1F5F9;
    --steel-100: #E2E8F0;
    --steel-200: #CBD5E1;
    --steel-300: #94A3B8;

    /* ---- Shell: Header ---- */
    --header-height: 56px;
    --header-bg: var(--steel-100);
    --header-border: rgba(15, 23, 42, 0.08);
    --shadow-header: 0 2px 10px rgba(15, 23, 42, 0.06);

    /* ---- Shell: Sidebar ---- */
    --sidebar-brand-size: 18px;
    --sidebar-brand-weight: 600;
    --shadow-sidebar: 0 10px 28px rgba(15, 23, 42, 0.10);

    /* ---- Shell: Footer ---- */
    --footer-border: rgba(15, 23, 42, 0.08);
    --footer-text: rgba(15, 23, 42, 0.55);
    --footer-padding-y: 12px;
    --footer-padding-x: 16px;
    --footer-font-size: 12px;

    /* ---- Transitions ---- */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
}

/* ---- Base typography (unified font) ---- */
html, body {
    font-family: var(--font-sans);
}