:root {
  color-scheme: light;

  /* Brand */
  --brand-navy:        #102A56;
  --brand-navy-deep:   #0A1B3A;
  --brand-sky:         #2E7BE8;
  --brand-sky-soft:    #DDEBFB;

  /* Legacy aliases, keep so existing JS that reads --stasher-navy etc. still works */
  --stasher-navy:      #102A56;
  --stasher-blue:      #2E7BE8;
  --stasher-cream:     #FFE0A1;

  /* Surfaces */
  --paper:             #F6F1E7;
  --paper-2:           #FFFCF5;
  --surface:           #FFFFFF;
  --ink:               #0F1B33;
  --ink-soft:          #4A5878;
  --muted:             #7A879E;
  --line:              rgba(15, 27, 51, 0.10);
  --line-strong:       rgba(15, 27, 51, 0.18);

  /* Sequential ramp (quiet -> loud), earth tones */
  --scale-1:           #1F4F7A;
  --scale-2:           #5A8FB0;
  --scale-3:           #C9BFA8;
  --scale-4:           #D98863;
  --scale-5:           #B0432A;

  /* Diverging */
  --div-pos:           #2E7BE8;
  --div-pos-soft:      rgba(46, 123, 232, 0.18);
  --div-neg:           #B0432A;
  --div-neg-soft:      rgba(176, 67, 42, 0.16);

  /* Globe section (dark) */
  --night:             #0A1426;
  --night-2:           #131E36;
  --night-line:        rgba(255, 255, 255, 0.10);

  /* Legacy semantic colors retained for any unmigrated JS */
  --siren:             #B0432A;
  --warm:              #D98863;

  /* Typography */
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;

  /* Motion */
  --ease-stately:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-responsive: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur-base:  240ms;
  --dur-slow:  520ms;
  --dur-atmos: 1200ms;

  /* Legacy motion aliases retained */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur:       240ms;

  /* Used by ScrollTrigger noise driver in main.js */
  --noise: 0;

  /* Radii and shadows (preserved for components.css / sections.css) */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --shadow-sm: 0 10px 30px rgba(16, 42, 86, 0.08);
  --shadow-md: 0 24px 70px rgba(16, 42, 86, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
  }
}