/* ═══════════════════════════════════════════════════════════
   Vessel UI — Design Tokens
   MIT License · uisuppli.es
   ═══════════════════════════════════════════════════════════ */

/* ── Light mode defaults ──────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-background:       #FDFCFC;  /* warm cream page */
  --color-surface:          #F5F3F1;  /* subtle card lift */
  --color-surface-strong:   #EBE8E4;  /* section panels, stone */
  --color-surface-raised:   #FFFFFF;  /* elevated cards, overlays */

  /* Text */
  --color-foreground:           #000000;  /* primary */
  --color-foreground-secondary: #57534E;  /* secondary */
  --color-foreground-muted:     #A59F97;  /* muted labels */
  --color-foreground-faint:     #77716A;  /* placeholder, subtle */

  /* Borders */
  --color-border:        #E5E5E5;
  --color-border-strong: #000000;
  --color-border-subtle: rgba(0, 0, 0, 0.05);

  /* Brand accent — overridden per seed */
  --color-accent:        #000000;  /* seed 1 default: black */
  --color-accent-fg:     #FFFFFF;
  --color-accent-subtle: rgba(0, 0, 0, 0.06);

  /* Fixed accent pair (orange + blue — from real site) */
  --color-accent-orange: #FF4704;
  --color-accent-blue:   #0447FF;
  --color-accent-green:  #10B978;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-pill: 9999px;
  --radius-xl:   24px;
  --radius-lg:   16px;
  --radius-md:   12px;
  --radius-sm:    8px;
  --radius-xs:    4px;
  --radius-2xs:   2px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font sizes */
  --font-size-2xs: 11px;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-base:16px;
  --font-size-lg:  18px;
  --font-size-xl:  20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;

  /* Font weights */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Letter spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-wider:   0.06em;

  /* Line heights */
  --line-height-display: 1.08;
  --line-height-heading: 1.2;
  --line-height-body:    1.6;
  --line-height-relaxed: 1.75;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14);

  /* ── Spacing scale ───────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark mode (overrides everything — always last) ──────── */
[data-theme="dark"] {
  --color-background:       #0F1117;
  --color-surface:          #161B27;
  --color-surface-strong:   #1E2535;
  --color-surface-raised:   #1A2030;
  --color-foreground:           #EEF0F5;  /* cool off-white, not warm */
  --color-foreground-secondary: #8891A8;  /* cool blue-grey, was warm tan */
  --color-foreground-muted:     #4E5A72;  /* cool slate, was warm brown */
  --color-foreground-faint:     #2D3549;  /* cool dark, was warm dark brown */
  --color-border:        #232D42;         /* cool blue-grey border */
  --color-border-strong: #EEF0F5;
  --color-border-subtle: rgba(255, 255, 255, 0.05);

  /* ── Accent: flip to light in dark mode (was #000 — invisible on dark surfaces) */
  --color-accent:        #EEF0F5;  /* cool off-white — readable on all dark surfaces */
  --color-accent-fg:     #0F1117;  /* dark text on light accent */
  --color-accent-subtle: rgba(238, 240, 245, 0.08);
}