:root {
    /* ---- Navy / Ink (primary brand, surfaces & depth) ---- */
    --navy-950: #050D20;
    --navy-900: #081634;
    --navy-800: #0C2148;
    --navy-700: #122E5E;
    --navy-600: #1A3D78;
    --navy-500: #28508F;
    /* ---- Brand Blue (primary action, links, focus) ---- */
    --blue-700: #1A43C8;
    --blue-600: #2456E6; /* primary */
    --blue-500: #3D6BFF;
    --blue-400: #6B92FF;
    --blue-300: #A7C0FF;
    --blue-200: #CBD8FF;
    --blue-100: #E1E9FF;
    --blue-50: #F0F4FF;
    /* ---- Spark / Aqua (the AI accent: energy, agents, live state) ---- */
    --spark-700: #FBBA21;
    --spark-600: #E6A204;
    --spark-500: #FCC441; /* hero accent */
    --spark-400: #FDDB8B;
    --spark-300: #FEE8B6;
    --spark-200: #FEF3D9;
    --spark-100: #FEF7E7;
    /* ---- Neutrals (cool, faint blue cast) ---- */
    --white: #FFFFFF;
    --gray-50: #F7F8FB;
    --gray-100: #EEF1F6;
    --gray-200: #E1E6EF;
    --gray-300: #CDD4E0;
    --gray-400: #A7B0C2;
    --gray-500: #7A8499;
    --gray-600: #586075;
    --gray-700: #3C4356;
    --gray-800: #262C3B;
    --gray-900: #161A26;
    --black: #0A0C12;
    /* ---- Semantic signals ---- */
    --success-600: #138A4E;
    --success-500: #1FB866;
    --success-100: #DAF6E7;
    --warning-600: #C7820B;
    --warning-500: #E9A91C;
    --warning-100: #FBF0D4;
    --danger-600: #CB2F33;
    --danger-500: #E5484D;
    --danger-100: #FCE0E1;
    /* ============================================================
     SEMANTIC ALIASES: reach for these in UI, not the raw scales
     ============================================================ */
    /* Text */
    --text-strong: var(--navy-900);
    --text-body: var(--gray-700);
    --text-muted: var(--gray-500);
    --text-subtle: var(--gray-400);
    --text-on-dark: #EAF0FA;
    --text-on-dark-muted: #9DAAC4;
    --text-link: var(--blue-600);
    --text-accent: var(--spark-700);
    /* Surfaces: light */
    --surface-page: var(--gray-50);
    --surface-card: var(--white);
    --surface-sunken: var(--gray-100);
    --surface-raised: var(--white);
    --surface-hover: var(--gray-100);
    /* Surfaces: dark (the "exciting" agentic canvas) */
    --surface-ink: var(--navy-950);
    --surface-ink-raised: var(--navy-900);
    --surface-ink-card: var(--navy-800);
    --surface-ink-hover: var(--navy-700);
    /* Borders & lines */
    --border-subtle: var(--gray-200);
    --border-default: var(--gray-300);
    --border-strong: var(--gray-400);
    --border-ink: rgba(255,255,255,0.10);
    --border-ink-strong: rgba(255,255,255,0.18);
    /* Brand / action */
    --brand-primary: var(--blue-600);
    --brand-primary-hover: var(--blue-700);
    --brand-primary-text: var(--white);
    --brand-accent: var(--spark-500);
    --brand-accent-strong: var(--spark-600);
    --brand-ink: var(--navy-900);
    /* Focus ring */
    --focus-ring: var(--blue-500);
    /* Agent / live status mapping */
    --status-thinking: var(--spark-500);
    --status-running: var(--blue-500);
    --status-done: var(--success-500);
    --status-error: var(--danger-500);
    --status-idle: var(--gray-400);
    /* Signature gradient: used sparingly for hero spark moments only */
    --grad-spark: linear-gradient(120deg, var(--spark-500) 0%, var(--blue-500) 100%);
    --grad-ink: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-950) 100%);
    --text-3xs: 10px;
    --text-xsm: 14px;
}

/* ============================================================
   RELAIBLE: Typography tokens
   ============================================================ */

:root {
    /* Families */
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    /* Type scale (1.25 major-third-ish, tuned) */
    --text-2xs: 11px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 30px;
    --text-3xl: 38px;
    --text-4xl: 48px;
    --text-5xl: 62px;
    --text-6xl: 80px;
    /* Weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    /* Line heights */
    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.45;
    --lh-relaxed: 1.6;
    /* Letter spacing */
    --ls-tighter: 0;
    --ls-tight: 0;
    --ls-normal: 0;
    --ls-wide: 0;
    --ls-caps: 0;
    /* Semantic roles */
    --type-display-font: var(--font-display);
    --type-heading-font: var(--font-display);
    --type-body-font: var(--font-sans);
    --type-mono-font: var(--font-mono);
    --type-eyebrow-size: var(--text-xs);
    --type-eyebrow-spacing: 0;
    --type-eyebrow-weight: var(--fw-semibold);
}

/* ============================================================
   RELAIBLE: Spacing & sizing tokens
   Base unit: 4px. Layout rhythm built on this scale.
   ============================================================ */

:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 128px;
    /* Container widths */
    --container-sm: 640px;
    --container-md: 880px;
    --container-lg: 1120px;
    --container-xl: 1320px;
    /* Component sizing */
    --control-h-sm: 32px;
    --control-h-md: 40px;
    --control-h-lg: 48px;
    /* Common gaps */
    --gutter: var(--space-6);
    --section-y: var(--space-12);
}

/* ============================================================
   RELAIBLE: Radius, shadow, border & motion tokens
   ============================================================ */

:root {
    /* ---- Corner radii ---- (confident but not pill-soft) */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;
    --radius-card: var(--radius-lg);
    /* ---- Borders ---- */
    --border-width: 1px;
    --border-width-strong: 1.5px;
    /* ---- Elevation / shadow ---- (cool navy-tinted, soft) */
    --shadow-xs: 0 1px 2px rgba(8, 22, 52, 0.06);
    --shadow-sm: 0 1px 3px rgba(8, 22, 52, 0.08), 0 1px 2px rgba(8, 22, 52, 0.04);
    --shadow-md: 0 4px 12px rgba(8, 22, 52, 0.08), 0 2px 4px rgba(8, 22, 52, 0.05);
    --shadow-lg: 0 12px 28px rgba(8, 22, 52, 0.12), 0 4px 8px rgba(8, 22, 52, 0.06);
    --shadow-xl: 0 24px 56px rgba(8, 22, 52, 0.16), 0 8px 16px rgba(8, 22, 52, 0.08);
    /* On-dark elevation */
    --shadow-ink: 0 16px 40px rgba(0, 0, 0, 0.45);
    /* Spark glow: for live/agentic accent moments only */
    --glow-spark: 0 0 0 1px rgba(20, 214, 196, 0.4), 0 0 24px rgba(20, 214, 196, 0.28);
    --glow-blue: 0 0 0 1px rgba(61, 107, 255, 0.4), 0 0 24px rgba(61, 107, 255, 0.25);
    /* Focus ring */
    --ring-focus: 0 0 0 3px rgba(61, 107, 255, 0.35);
    --ring-focus-accent: 0 0 0 3px rgba(20, 214, 196, 0.35);
    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --dur-slower: 520ms;
}