/* Harborpick brand tokens. Copy to static/css/tokens.css.
   Light is the default; dark follows the system unless <html data-theme="light"> is set,
   and <html data-theme="dark"> forces dark. Fonts: Fraunces (600) and Figtree (400, 600, 700),
   subsets latin + latin-ext. */

:root {
  --surface-100: #f7f4ee;
  --surface-200: #ffffff;
  --surface-tint: #e3f0ef;
  --surface-deep: #0f2a3d;
  --on-deep: #f7f4ee;
  --on-deep-brand: #5cc3d3;
  --ink: #0f2a3d;
  --ink-muted: #4a6070;
  --line: #d9d3c7;
  --line-strong: #7b8b96;
  --brand: #1f7a8c;
  --on-brand: #ffffff;
  --brand-deep: #0f4c5c;
  --accent: #c8481b;
  --accent-hover: #a63a12;
  --on-accent: #ffffff;
  --pros: #145e4b;
  --cons: #9a3412;
  --focus: var(--brand-deep);
  --shadow-card: 0 1px 2px rgba(15, 42, 61, 0.08), 0 8px 24px rgba(15, 42, 61, 0.08);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-100: #0c1e2b;
    --surface-200: #12293a;
    --surface-tint: #163545;
    --surface-deep: #071722;
    --on-deep: #f7f4ee;
    --ink: #eef3f2;
    --ink-muted: #a9bbc4;
    --line: #26455a;
    --line-strong: #5e7c8e;
    --brand: #5cc3d3;
    --on-brand: #0c1e2b;
    --brand-deep: #8ed6e0;
    --accent: #f28c5e;
    --accent-hover: #f9a47f;
    --on-accent: #0c1e2b;
    --pros: #6fd3a9;
    --cons: #f4a27a;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --surface-100: #0c1e2b;
  --surface-200: #12293a;
  --surface-tint: #163545;
  --surface-deep: #071722;
  --on-deep: #f7f4ee;
  --ink: #eef3f2;
  --ink-muted: #a9bbc4;
  --line: #26455a;
  --line-strong: #5e7c8e;
  --brand: #5cc3d3;
  --on-brand: #0c1e2b;
  --brand-deep: #8ed6e0;
  --accent: #f28c5e;
  --accent-hover: #f9a47f;
  --on-accent: #0c1e2b;
  --pros: #6fd3a9;
  --cons: #f4a27a;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Type styles */
.display-xl { font: 600 56px/60px var(--font-display); letter-spacing: -0.02em; }
.display-lg { font: 600 40px/46px var(--font-display); letter-spacing: -0.02em; }
.heading    { font: 600 28px/34px var(--font-display); letter-spacing: -0.01em; }
.title      { font: 600 20px/28px var(--font-sans); }
.body       { font: 400 16px/26px var(--font-sans); }
.body-sm    { font: 400 14px/22px var(--font-sans); }
.label      { font: 600 13px/18px var(--font-sans); letter-spacing: 0.02em; }
.caption    { font: 400 12px/18px var(--font-sans); }