/* SeaCurrent design tokens — extracted from index.html */

:root {
  /* Backgrounds (deep → elevated) */
  --bg-0: #0a1628;
  --bg-1: #101d33;
  --bg-2: #0d1a2e;
  --bg-3: #152238;
  --bg-elevated: #1a3558;

  /* Borders */
  --border: #1e3050;
  --border-strong: #2c4f7a;
  --border-hover: #3a6ea5;
  --border-focus: #4a9eff;

  /* Foreground */
  --fg-0: #ffffff;
  --fg-1: #e0e6ed;
  --fg-2: #8a9bb5;
  --fg-3: #7a8fa6;
  --fg-4: #5a7a9a;

  /* Accent */
  --accent: #4a9eff;
  --accent-strong: #2563eb;
  --accent-strong-hover: #1d4ed8;

  /* Semantic */
  --success: #34d399;
  --warn: #f59e0b;
  --error: #f87171;
  --seed: #ff4444;

  /* Velocity gradient — signature */
  --gradient-current: linear-gradient(90deg,
    #1a237e 0%, #1565c0 14%, #42a5f5 28%, #26c6da 42%,
    #00e5ff 56%, #76ff03 70%, #ffeb3b 82%, #ff9800 92%, #f44336 100%);

  --gradient-wind: linear-gradient(90deg,
    #2C2C82, #2C58A0, #2A8AB0, #299E96, #34AF6D, #6BB94A,
    #B0BA3E, #DFB138, #DD8B1D, #C84F26, #A12F2D, #8B2A52);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid root size */
  --fs-fluid: clamp(14px, 0.45vw + 11px, 20px);

  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-display: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  --fs-h1: 2rem;
  --fs-h2: 1.4em;
  --fs-h3: 1.15em;
  --fs-body: 1em;
  --fs-small: 0.92em;
  --fs-hint: 0.88em;
  --fs-micro: 0.82em;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 16px;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;

  /* Surface recipe */
  --overlay-bg: rgba(16, 29, 51, 0.92);
  --overlay-blur: blur(8px);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s;
  --dur-med: 0.25s;
}

/* Semantic element styles */
body {
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--fg-1);
  font-size: var(--fs-body);
}

h1 { font-size: var(--fs-h1); color: var(--fg-0); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); color: var(--fg-0); font-weight: 700; }
h3 { font-size: var(--fs-h3); color: var(--fg-0); font-weight: 600; }

.text-hero    { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; color: var(--fg-0); }
.text-display { font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--fg-0); }
.text-label   { font-size: var(--fs-small); color: var(--fg-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.text-hint    { font-size: var(--fs-hint); color: var(--fg-3); }
.text-mono    { font-family: var(--font-mono); font-size: var(--fs-hint); color: var(--fg-3); }

.card-surface {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.overlay-surface {
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: var(--overlay-blur);
}