/* ==========================================================================
   1. DESIGN TOKENS  —  Clearway Design System (§1)
   ========================================================================== */
:root {
    /* --- Colour ----------------------------------------------------------- */
    --surface: #f9f9fc;
    --surface-dim: #dadadd;
    --surface-bright: #f9f9fc;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f7;
    --surface-container: #eeedf1;
    --surface-container-high: #e8e8eb;
    --surface-container-highest: #e2e2e5;
    --on-surface: #1a1c1e;
    --on-surface-variant: #42474e;
    --inverse-surface: #2f3033;
    --inverse-on-surface: #f1f0f4;
    --outline: #72777f;
    --outline-variant: #c2c7cf;
    --surface-tint: #3a6286;
    --primary: #001f36;
    --on-primary: #ffffff;
    --primary-container: #003557;
    --on-primary-container: #779ec6;
    --inverse-primary: #a3caf4;
    --secondary: #006687;
    --on-secondary: #ffffff;
    --secondary-container: #58cafd;
    --on-secondary-container: #00536f;
    --tertiary: #311600;
    --on-tertiary: #ffffff;
    --tertiary-container: #502800;
    --on-tertiary-container: #ca8e5c;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --primary-fixed: #cee5ff;
    --primary-fixed-dim: #a3caf4;
    --on-primary-fixed: #001d33;
    --on-primary-fixed-variant: #1f4a6d;
    --secondary-fixed: #c1e8ff;
    --secondary-fixed-dim: #74d1ff;
    --on-secondary-fixed: #001e2b;
    --on-secondary-fixed-variant: #004d67;
    --tertiary-fixed: #ffdcc3;
    --tertiary-fixed-dim: #fbb984;
    --on-tertiary-fixed: #2f1500;
    --on-tertiary-fixed-variant: #693c11;
    --background: #f9f9fc;
    --on-background: #1a1c1e;
    --surface-variant: #e2e2e5;
    /* --- Typography ------------------------------------------------------- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --display-size: 36px;
    --display-lh: 44px;
    --display-weight: 700;
    --display-ls: -0.02em;
    --headline-lg-size: 28px;
    --headline-lg-lh: 36px;
    --headline-lg-weight: 600;
    --headline-lg-ls: -0.01em;
    --headline-md-size: 20px;
    --headline-md-lh: 28px;
    --headline-md-weight: 600;
    --headline-lg-m-size: 24px;
    --headline-lg-m-lh: 32px;
    --body-lg-size: 16px;
    --body-lg-lh: 24px;
    --body-lg-weight: 400;
    --body-md-size: 14px;
    --body-md-lh: 20px;
    --body-md-weight: 400;
    --label-sm-size: 12px;
    --label-sm-lh: 16px;
    --label-sm-weight: 600;
    --label-sm-ls: 0.05em;
    /* --- Radius ----------------------------------------------------------- */
    --radius-sm: 0.25rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    /* --- Spacing ---------------------------------------------------------- */
    --unit: 4px;
    --container-padding: 24px;
    --gutter: 16px;
    --sidebar-width: 260px;
    --stack-sm: 8px;
    --stack-md: 16px;
    --stack-lg: 32px;
    /* --- Derived elevation / motion --------------------------------------- */
    --elev-1: 0 1px 2px rgba(0, 31, 54, .08), 0 1px 1px rgba(0, 31, 54, .04);
    --elev-2: 0 4px 12px rgba(0, 31, 54, .10), 0 1px 3px rgba(0, 31, 54, .06);
    --elev-3: 0 16px 40px rgba(0, 31, 54, .18), 0 2px 8px rgba(0, 31, 54, .08);
    --motion-fast: 120ms cubic-bezier(.2, 0, 0, 1);
    --motion-base: 200ms cubic-bezier(.2, 0, 0, 1);
    /* --- ERP Custom Colors---------------*/
    --erp-sub-appname: rgb(236, 3, 58);
}