/* Shared design tokens for the whole releases.jonbarnes.dev site (hub deck + every
   product lander). One source of truth, device-preference light/dark via
   prefers-color-scheme. Explicit [data-theme] still forces a theme where needed
   (e.g. the docs page). Both the hub and the landers link this file directly. */

:root {
  /* ---- theme-independent ---- */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, ui-sans-serif, sans-serif;
  --font-prose: "Iowan Old Style", "Charter", "Source Serif Pro", "Source Serif 4", "Georgia", "Cambria", ui-serif, serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", "Fira Code", "SF Mono", Menlo, Consolas, ui-monospace, monospace;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px;
  --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px; --fs-4xl: 42px;

  --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.6; --lh-relaxed: 1.75;

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

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 16px;

  --content-max: 760px;
  --container: 1200px;
  --gutter: 28px;
  --header-h: 64px;
  --wrap: 1200px;
  --wrap-pad: clamp(20px, 6vw, 84px);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---- dark palette (default) ---- */
  --bg: #131318;
  --bg-2: #0e0e14;
  --surface: #181820;
  --surface-2: #1f1f29;
  --surface-3: #272732;
  --text: #eceaea;
  --text-2: #b5b3b6;
  --text-3: #7c7a80;
  --text-4: #56555c;
  --border: #2a2a33;
  --border-strong: #38383f;
  --accent: #4ffcc0;
  --accent-hover: #6fffcd;
  --accent-soft: #163029;
  --accent-fg: #0a1f19;
  --danger: #f08488;
  --link: #6cfcc8;
  --link-hover: #8bffd7;
  --code-bg: #1b1b24;
  --code-border: #2a2a34;
  --code-inline-bg: #232330;
  --selection: #1f5040;
  --kbd-bg: #20202b;
  --quote-bar: #3d7864;
  --quote-bg: #142822;
  --table-stripe: #1c1c26;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --syntax-comment: #6d6878;
  --syntax-keyword: #6fffc8;
  --syntax-string: #a0d6a0;
  --syntax-number: #e8a878;
  --syntax-function: #80e8d0;
  --syntax-variable: #eceaea;
  --syntax-type: #80d0da;
  --syntax-tag: #f08488;
  --syntax-attr: #6fffc8;
  --syntax-punctuation: #9c9aa3;
  --syntax-meta: #b5a98c;

  /* ---- per-focus / per-product accent colors (dark) ----
     Used by the hub columns and every lander's focus columns. Each has a light
     variant below so the neon tones don't glare on a light background. */
  --c-hero: #4ffcc0;
  --c-md-studio: #4ffcc0;
  --c-rich: #a78bfa;
  --c-raw: #fbbf24;
  --c-preview: #38bdf8;
  --c-privacy: #34d399;
  --c-outline: #f472b6;
  --c-faq: #94a3b8;
  --c-download: #4ffcc0;
  --c-webfeather: #38bdf8;
  --c-quillpull: #a78bfa;
}

/* ---- light palette (device preference) ---- */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbf8f3;
    --bg-2: #ffffff;
    --surface: #fffef9;
    --surface-2: #f2eee6;
    --surface-3: #eae5d9;
    --text: #1a1a1f;
    --text-2: #4a4a52;
    --text-3: #7a7a82;
    --text-4: #a8a6a4;
    --border: #e6e0d2;
    --border-strong: #d2cab6;
    --accent: #10c896;
    --accent-hover: #0eb385;
    --accent-soft: #daf6ec;
    --accent-fg: #0a2a22;
    --danger: #c24a50;
    --link: #058a6a;
    --link-hover: #036b53;
    --code-bg: #f4f0e6;
    --code-border: #e2dbc8;
    --code-inline-bg: #efead9;
    --selection: #beeedc;
    --kbd-bg: #faf6ec;
    --quote-bar: #c9b894;
    --quote-bg: #f5efdf;
    --table-stripe: #f6f2e7;
    --shadow-1: 0 1px 2px rgba(74, 60, 30, 0.05), 0 0 0 1px rgba(74, 60, 30, 0.05);
    --shadow-2: 0 6px 24px rgba(74, 60, 30, 0.08), 0 0 0 1px rgba(74, 60, 30, 0.05);
    --syntax-comment: #8a7a55;
    --syntax-keyword: #0e8a6a;
    --syntax-string: #4b7f3e;
    --syntax-number: #b85d2d;
    --syntax-function: #237a8a;
    --syntax-variable: #1a1a1f;
    --syntax-type: #2d7480;
    --syntax-tag: #b0464c;
    --syntax-attr: #0e8a6a;
    --syntax-punctuation: #6c6a66;
    --syntax-meta: #8a7a55;

    /* darker, readable accent variants for light backgrounds */
    --c-hero: #10c896;
    --c-md-studio: #10c896;
    --c-rich: #7c5cff;
    --c-raw: #b26b00;
    --c-preview: #0284c7;
    --c-privacy: #0d9e6e;
    --c-outline: #db2777;
    --c-faq: #64748b;
    --c-download: #10c896;
    --c-webfeather: #0284c7;
    --c-quillpull: #7c5cff;
  }
}

/* ---- explicit theme override (wins over device preference) ---- */
[data-theme="dark"] {
  --bg: #131318; --bg-2: #0e0e14; --surface: #181820; --surface-2: #1f1f29; --surface-3: #272732;
  --text: #eceaea; --text-2: #b5b3b6; --text-3: #7c7a80; --text-4: #56555c;
  --border: #2a2a33; --border-strong: #38383f;
  --accent: #4ffcc0; --accent-hover: #6fffcd; --accent-soft: #163029; --accent-fg: #0a1f19; --danger: #f08488;
  --link: #6cfcc8; --link-hover: #8bffd7;
  --code-bg: #1b1b24; --code-border: #2a2a34; --code-inline-bg: #232330; --selection: #1f5040;
  --kbd-bg: #20202b; --quote-bar: #3d7864; --quote-bg: #142822; --table-stripe: #1c1c26;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --c-hero: #4ffcc0; --c-md-studio: #4ffcc0; --c-rich: #a78bfa; --c-raw: #fbbf24; --c-preview: #38bdf8;
  --c-privacy: #34d399; --c-outline: #f472b6; --c-faq: #94a3b8; --c-download: #4ffcc0;
  --c-webfeather: #38bdf8; --c-quillpull: #a78bfa;
}
[data-theme="light"] {
  --bg: #fbf8f3; --bg-2: #ffffff; --surface: #fffef9; --surface-2: #f2eee6; --surface-3: #eae5d9;
  --text: #1a1a1f; --text-2: #4a4a52; --text-3: #7a7a82; --text-4: #a8a6a4;
  --border: #e6e0d2; --border-strong: #d2cab6;
  --accent: #10c896; --accent-hover: #0eb385; --accent-soft: #daf6ec; --accent-fg: #0a2a22; --danger: #c24a50;
  --link: #058a6a; --link-hover: #036b53;
  --code-bg: #f4f0e6; --code-border: #e2dbc8; --code-inline-bg: #efead9; --selection: #beeedc;
  --kbd-bg: #faf6ec; --quote-bar: #c9b894; --quote-bg: #f5efdf; --table-stripe: #f6f2e7;
  --shadow-1: 0 1px 2px rgba(74, 60, 30, 0.05), 0 0 0 1px rgba(74, 60, 30, 0.05);
  --shadow-2: 0 6px 24px rgba(74, 60, 30, 0.08), 0 0 0 1px rgba(74, 60, 30, 0.05);
  --c-hero: #10c896; --c-md-studio: #10c896; --c-rich: #7c5cff; --c-raw: #b26b00; --c-preview: #0284c7;
  --c-privacy: #0d9e6e; --c-outline: #db2777; --c-faq: #64748b; --c-download: #10c896;
  --c-webfeather: #0284c7; --c-quillpull: #7c5cff;
}