:root {
  --surface-0:       #0a1736;
  --surface-1:       #0a1736;
  --surface-navy-1:  #0f1f48;
  --surface-2:       #142858;
  --surface-card:    #182e64;
  --surface-elevated:#213c7c;
  --surface-deep:    #05070d;
  --surface-deep-2:  #06101f;
  --surface-deep-3:  #0a1a35;

  --surface-3:       #f5f5f7;
  --surface-light:   #f5f5f7;
  --surface-light-2: #fafafa;
  --surface-light-3: #e9e9e9;

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

  --ink:        #ffffff;
  --ink-dim:    rgba(255, 255, 255, 0.72);
  --ink-strong: rgba(255, 255, 255, 0.65);
  --ink-soft:   rgba(255, 255, 255, 0.55);
  --ink-mid:    rgba(255, 255, 255, 0.55);
  --ink-faint:  rgba(255, 255, 255, 0.45);
  --ink-mute:   rgba(255, 255, 255, 0.45);
  --ink-ghost:  rgba(255, 255, 255, 0.18);

  --ink-dark:      #1d1d1f;
  --ink-dark-dim:  rgba(29, 29, 31, 0.7);
  --ink-dark-soft: rgba(29, 29, 31, 0.55);

  --line:         rgba(255, 255, 255, 0.08);
  --line-soft:    rgba(255, 255, 255, 0.06);
  --line-2:       rgba(255, 255, 255, 0.10);
  --line-12:      rgba(255, 255, 255, 0.12);
  --line-strong:  rgba(255, 255, 255, 0.14);
  --line-dark:    rgba(29, 29, 31, 0.12);

  --accent:             #0A84FF;
  --accent-pressed:     #0066CC;
  --accent-light:       #6dc3ff;
  --accent-tint:        rgba(10, 132, 255, 0.12);
  --accent-tint-strong: rgba(10, 132, 255, 0.22);
  --accent-glow:        rgba(10, 132, 255, 0.18);
  --accent-glow-soft:   rgba(10, 132, 255, 0.16);

  --success: #34C759;
  --warning: #FF9F0A;
  --danger:  #FF453A;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 160px;

  --page-inset:  clamp(20px, 4vw, 32px);
  --page-max:    1240px;
  --panel-pad:   clamp(20px, 3.4vw, 36px);
  --panel-pad-lg:clamp(24px, 4.4vw, 48px);
  --section-y:   clamp(40px, 8vw, 96px);
  --section-y-lg:clamp(56px, 11vw, 160px);
  --nav-h:       60px;
  --tap:         44px;

  --t-mega:     clamp(60px, 12vw, 168px);
  --t-display:  clamp(38px, 7vw, 104px);
  --t-headline: clamp(29px, 4.5vw, 64px);
  --t-title:    clamp(21px, 2.2vw, 28px);
  --t-lede:     clamp(17px, 1.6vw, 21px);
  --t-body:     17px;
  --t-caption:  13px;
  --t-kicker:   12px;

  --lh-display:  1.04;
  --lh-headline: 1.08;
  --lh-title:    1.2;
  --lh-body:     1.55;
  --lh-tight:    1.3;

  --ls-mega:     -0.045em;
  --ls-display:  -0.04em;
  --ls-headline: -0.035em;
  --ls-title:    -0.02em;
  --ls-body:     -0.005em;
  --ls-kicker:   0.18em;

  --w-prose: 720px;
  --w-text:  980px;
  --w-wide:  1240px;
  --maxw:    1240px;

  --r-sm:      12px;
  --r-input:   16px;
  --r-md:      20px;
  --r-modal:   24px;
  --r-card:    26px;
  --r-lg:      30px;
  --r-feature: 40px;
  --r-pill:    999px;

  --card-pad:    var(--panel-pad);
  --card-pad-lg: var(--panel-pad-lg);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.22);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.30);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    180ms;
  --dur-ui:      200ms;
  --dur-mid:     280ms;
  --dur-slow:    480ms;
  --dur-scene:   900ms;

  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   120;

  --font-sans:    "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-brand:   "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Inter", system-ui, -apple-system, Segoe UI, sans-serif;

  --vsx-bg-1:       var(--surface-deep-2);
  --vsx-bg-2:       var(--surface-deep-3);
  --vsx-line:       rgba(140, 180, 230, 0.12);
  --vsx-line-strong:rgba(140, 180, 230, 0.22);
  --vsx-card:       rgba(255, 255, 255, 0.025);
  --vsx-cad:        #2aaef4;
  --vsx-aura:       #94a3b8;
  --vsx-yes:        #3ac471;
  --vsx-no:         #f44747;
  --vsx-ink:        #e8eef8;
  --vsx-dim:        rgba(200, 215, 235, 0.7);

  --bg:           var(--surface-1);
  --bg-2:         var(--surface-2);
  --primary:      var(--accent);
  --primary-2:    var(--accent-pressed);
  --card:         rgba(255, 255, 255, 0.025);
  --card-border:  var(--line);
  --pill-bg:      rgba(255, 255, 255, 0.04);
  --radius:       var(--r-input);
  --radius-lg:    var(--r-card);
  --radius-pill:  var(--r-pill);
}

@media (min-width: 721px) {
  :root { --nav-h: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:  0ms;
    --dur-ui:    0ms;
    --dur-mid:   0ms;
    --dur-slow:  0ms;
    --dur-scene: 0ms;
  }
}

@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}