:root {
    /* Brand palette — primitives. Components should use semantic variables below. */
    --ngx-blue-50: #eef7ff;
    --ngx-blue-100: #d8edff;
    --ngx-blue-200: #b9ddff;
    --ngx-blue-300: #8bc7ff;
    --ngx-blue-400: #55abff;
    --ngx-blue-500: #258dff;
    --ngx-blue-600: #0d6efd;
    --ngx-blue-700: #075cf0;
    --ngx-blue-800: #0b49bd;
    --ngx-blue-900: #103f93;
    --ngx-blue-950: #0b2758;

    --ngx-navy-950: #02070d;
    --ngx-navy-900: #030a13;
    --ngx-navy-850: #050f1b;
    --ngx-navy-800: #06111f;
    --ngx-navy-750: #071626;
    --ngx-navy-700: #081523;
    --ngx-navy-650: #0b1929;
    --ngx-navy-600: #102237;

    --ngx-slate-50: #f7f9fc;
    --ngx-slate-100: #eef2f7;
    --ngx-slate-200: #dce3ec;
    --ngx-slate-300: #c3cedb;
    --ngx-slate-400: #9cabbc;
    --ngx-slate-500: #748399;
    --ngx-slate-600: #56667b;
    --ngx-slate-700: #3d4b5e;
    --ngx-slate-800: #263344;
    --ngx-slate-900: #172230;
    --ngx-slate-950: #0d141e;

    --ngx-green-500: #24c881;
    --ngx-green-600: #16a86a;
    --ngx-amber-500: #f4b84a;
    --ngx-amber-600: #d99a24;
    --ngx-red-500: #ff5f69;
    --ngx-red-600: #e14551;

    --ngx-white: #ffffff;
    --ngx-black: #000000;

    /* Typography */
    --ngx-font-sans: "Inter", "Segoe UI", Arial, sans-serif;
    --ngx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --ngx-font-size-xs: .75rem;
    --ngx-font-size-sm: .875rem;
    --ngx-font-size-md: 1rem;
    --ngx-font-size-lg: 1.125rem;
    --ngx-font-size-xl: 1.25rem;
    --ngx-font-size-2xl: 1.5rem;
    --ngx-font-size-3xl: 1.875rem;
    --ngx-font-size-4xl: 2.25rem;
    --ngx-line-tight: 1.15;
    --ngx-line-normal: 1.5;
    --ngx-line-relaxed: 1.65;
    --ngx-weight-regular: 400;
    --ngx-weight-medium: 500;
    --ngx-weight-semibold: 600;
    --ngx-weight-bold: 700;
    --ngx-weight-extrabold: 800;

    /* Spacing */
    --ngx-space-0: 0;
    --ngx-space-1: 4px;
    --ngx-space-2: 8px;
    --ngx-space-3: 12px;
    --ngx-space-4: 16px;
    --ngx-space-5: 20px;
    --ngx-space-6: 24px;
    --ngx-space-7: 32px;
    --ngx-space-8: 40px;
    --ngx-space-9: 48px;
    --ngx-space-10: 64px;
    --ngx-space-11: 80px;
    --ngx-space-12: 96px;
    --ngx-space-13: 120px;

    /* Radius */
    --ngx-radius-xs: 6px;
    --ngx-radius-sm: 8px;
    --ngx-radius-md: 12px;
    --ngx-radius-lg: 16px;
    --ngx-radius-xl: 22px;
    --ngx-radius-2xl: 30px;
    --ngx-radius-pill: 999px;

    /* Control sizing */
    --ngx-control-sm: 36px;
    --ngx-control-md: 44px;
    --ngx-control-lg: 52px;
    --ngx-icon-sm: 16px;
    --ngx-icon-md: 20px;
    --ngx-icon-lg: 24px;

    /* Layout
       Breakpoint contract (CSS media queries use these documented values):
       mobile < 640px, tablet 640–1023px, desktop 1024–1439px, large >= 1440px.
    */
    --ngx-container: 1440px;
    --ngx-container-narrow: 1120px;
    --ngx-container-reading: 820px;
    --ngx-header-height: 78px;
    --ngx-page-gutter: 24px;
    --ngx-section-gap: 80px;
    --ngx-section-gap-compact: 48px;
    --ngx-content-gap: 32px;

    /* Marketing page rhythm */
    --ngx-hero-padding-top: 64px;
    --ngx-hero-padding-bottom: 56px;
    --ngx-hero-grid-gap: clamp(40px, 6vw, 92px);
    --ngx-hero-title-size: clamp(2.7rem, 3.05vw, 3.15rem);
    --ngx-hero-lead-size: clamp(.96rem, 1vw, 1.05rem);
    --ngx-section-title-size: clamp(1.9rem, 3.4vw, 3.25rem);
    --ngx-page-end-space: 80px;
    --ngx-tap-target: 44px;

    --ngx-breakpoint-mobile: 640px;
    --ngx-breakpoint-tablet: 1024px;
    --ngx-breakpoint-large: 1440px;

    /* Motion */
    --ngx-duration-fast: 120ms;
    --ngx-duration-normal: 180ms;
    --ngx-duration-slow: 280ms;
    --ngx-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ngx-transition-control: var(--ngx-duration-normal) var(--ngx-ease-standard);

    /* Z-index */
    --ngx-z-base: 1;
    --ngx-z-dropdown: 400;
    --ngx-z-sticky: 600;
    --ngx-z-overlay: 800;
    --ngx-z-modal: 900;
    --ngx-z-toast: 1000;
}