:root {
  --font-body: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Ryker', 'Ryker Fallback', 'IBM Plex Sans', system-ui, sans-serif;
  --font-ui: 'IBM Plex Sans', 'Plex Fallback', system-ui, sans-serif;
  --font-ui-caps: 'IBM Plex Sans', 'Plex Fallback Caps', system-ui, sans-serif;
  --font-stat: 'Hind Guntur', 'IBM Plex Sans', system-ui, sans-serif;

  --type-overline: 500 11px/24px var(--font-body);
  --type-overline-tracking: 2px;
  --type-body-sm: 400 14px/22px var(--font-body);
  --type-body-md: 400 16px/24px var(--font-body);
  --type-label-sm: 500 12px/16px var(--font-body);
  --type-label-sm-tracking: 0.1px;
  --type-label-md: 500 13px/18px var(--font-body);

  --sp-0: 0;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;
  --sp-96: 96px;
  --sp-120: 120px;

  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --radius-btn: 40px;
  --radius-input: 5px;

  --btn-h-md: 40px;
  --btn-h-lg: 48px;

  --shadow-md: 0 6px 16px -4px rgba(10, 30, 65, 0.08);
  --shadow-card: 0 4px 12px rgba(85, 121, 184, 0.1);
  --shadow-cta: 0 4px 17px rgba(119, 168, 255, 0.45);
  --shadow-accent: var(--shadow-cta);

  --ink: #0A1E41;
  --ink-soft: #7A8AAA;
  --ink-dim: #9FAAC1;
  --ink-body: #4F628A;
  --ink-glass-body: #26375C;
  --ink-case: #3F5788;
  --ink-stat: #222937;

  --bg-studio: #FFFEFA;
  --bg-cream: #FFFCF4;
  --bg-cream-card: #FFF9F0;
  --bg-cream-panel: #FFFAF0;
  --bg-dark: #0A1E41;
  --slate: #3A4966;
  --white: #FFFEFD;

  --accent: #77A8FF;
  --accent-ink: #156AFF;
  --warm-chip: #FFECCC;

  --line-soft: #CFD7E7;
  --line-mute: #D9D9D9;

  --glass-strong: rgba(255, 255, 255, 0.6);
  --glass-soft: rgba(255, 255, 255, 0.18);
  --glass-mid: rgba(255, 255, 255, 0.36);
  --bf-glass: blur(24px) saturate(1.4);
  --bf-cta: blur(4px);
  --glass-border: rgba(255, 255, 255, 0.3);

  --scrim-dark: rgba(0, 0, 0, 0.2);

  --nav-sky: rgba(138, 179, 236, 0.9);
  --nav-sky-fade: rgba(166, 194, 232, 0);

  --nav-glass: color-mix(in srgb, var(--bg-studio) 22%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent-ink) 60%, var(--accent));
  --surface-disabled: color-mix(in srgb, var(--ink) 12%, var(--bg-studio));
  --accent-hover: color-mix(in srgb, var(--accent) 85%, var(--accent-ink));
  --accent-active: color-mix(in srgb, var(--accent) 70%, var(--accent-ink));

  --transition-fast: 150ms;
}