/* WhaBuzz design tokens. Shared by whabuzz.com (apps/landing/site) and docs.whabuzz.com (apps/docs).
   Source of truth: apps/landing/site/public/tokens.css. apps/docs/build.mjs copies it to apps/docs/tokens.css
   and inlines it, so each project still builds on its own.

   Schemes: dark is the default for every visitor, whatever the system preference. Light applies only
   when the visitor picked it with the toggle ([data-theme="light"], stored as wb-theme). :root holds the
   light values; the dark block below overrides them unless [data-theme="light"].
   The two dark blocks below must stay identical: both builds fail if they drift. */

:root {
  color-scheme: light;

  /* Type */
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-h3: 17px;
  --fs-h2: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 2.5vw, 3.25rem);
  --lh-body: 1.6;
  --lh-tight: 1.12;

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

  /* Radius */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-lg: 12px;

  /* Surfaces and text */
  --bg: #ffffff;
  --tint: #f3f6f5;
  --surface: #ffffff;
  --ink: #0f1a17;
  --ink-2: #44514c;
  --ink-3: #64706b;
  --line: #e2e7e5;
  --line-2: #c9d2ce;
  --line-3: #aab6b1;
  --disabled-fg: #a3aca8;
  --selection: #cfe7e1;
  --shadow: 0 12px 32px rgba(15, 26, 23, 0.12);

  /* Brand: one accent. --brand is the text/link/focus colour; --btn-* is the filled button. */
  --brand: #075e54;
  --brand-hover: #054a42;
  --brand-mark: #1fa58d;
  --brand-tint: #e5f1ee;
  --brand-line: #b4d8cf;
  --btn-bg: #075e54;
  --btn-bg-hover: #054a42;
  --btn-bg-active: #03362f;
  --btn-fg: #ffffff;
  --us-cell: #f4faf8;

  /* The one contrasting section */
  --night: #0f1a17;
  --night-2: #17241f;
  --night-line: #2a3a34;
  --night-fg: #e7eeeb;
  --night-dim: #95a69f;
  --night-strong: #ffffff;
  --night-link: #9fd9c9;
  --night-link-line: #3c6a5e;

  /* Code panels: dark in both schemes, raised and bordered in dark */
  --code-bg: #101916;
  --code-bar: #16211d;
  --code-line: #26342f;
  --code-border: #101916;
  --code-fg: #e4ebe8;
  --code-dim: #8b9b94;
  --code-strong: #ffffff;
  --code-ln: #4a5a54;
  --code-hover-bg: #1b2723;
  --code-hover-line: #3c4c46;
  --code-ok-line: #2c5a4c;
  --code-err-line: #6b2a24;
  --t-s: #a5d6bd;   /* strings */
  --t-k: #c3cdf2;   /* keys */
  --t-kw: #efb995;  /* keywords, literals, flags */
  --t-n: #e9d58f;   /* numbers */
  --t-c: #7d8e87;   /* comments */
  --t-v: #f0a9a1;   /* variables */

  /* Syntax on a light (tint) panel: inline JSON samples */
  --tj-fg: #0f1a17;
  --tj-s: #075e54;
  --tj-k: #3f4f87;
  --tj-kw: #8a3f17;
  --tj-n: #8a5a12;

  /* HTTP methods (semantic, docs) */
  --m-get: #2a5d99;
  --m-post: #075e54;
  --m-patch: #865611;
  --m-delete: #a3342a;

  /* Screenshots: never inverted, a hairline that reads on both backgrounds */
  --shot-border: #c9d2ce;
  --shot-bg: #f8f6f1;

  /* Theme toggle icon visibility */
  --icon-sun: none;
  --icon-moon: block;
}

@media all {
  :root:not([data-theme="light"]) {
    /* dark:begin */
    color-scheme: dark;
    --bg: #0e1513;
    --tint: #131c19;
    --surface: #111917;
    --ink: #e6ece9;
    --ink-2: #b2bfba;
    --ink-3: #8f9d97;
    --line: #212c28;
    --line-2: #2f3d38;
    --line-3: #485852;
    --disabled-fg: #56645e;
    --selection: #1d4a41;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --brand: #3dbfa3;
    --brand-hover: #74d6bf;
    --brand-mark: #1fa58d;
    --brand-tint: #102b26;
    --brand-line: #1f5a4e;
    --btn-bg: #1fa58d;
    --btn-bg-hover: #3bb89f;
    --btn-bg-active: #17907a;
    --btn-fg: #04201a;
    --us-cell: #0f221e;
    --night: #0a100e;
    --night-2: #131c19;
    --night-line: #222e2a;
    --night-fg: #e6ece9;
    --night-dim: #97a8a1;
    --night-strong: #ffffff;
    --night-link: #9fd9c9;
    --night-link-line: #2f5a4f;
    --code-bg: #16201d;
    --code-bar: #1b2622;
    --code-line: #2a3833;
    --code-border: #2a3833;
    --code-fg: #e4ebe8;
    --code-dim: #93a39c;
    --code-strong: #ffffff;
    --code-ln: #56665f;
    --code-hover-bg: #22302b;
    --code-hover-line: #44564f;
    --code-ok-line: #2c5a4c;
    --code-err-line: #6b2a24;
    --t-c: #84958e;
    --tj-fg: #e6ece9;
    --tj-s: #a5d6bd;
    --tj-k: #c3cdf2;
    --tj-kw: #efb995;
    --tj-n: #e9d58f;
    --m-get: #8ab8ee;
    --m-post: #3dbfa3;
    --m-patch: #e2b665;
    --m-delete: #f1958a;
    --shot-border: #33423c;
    --shot-bg: #f8f6f1;
    --icon-sun: block;
    --icon-moon: none;
    /* dark:end */
  }
}

:root[data-theme="dark"] {
  /* dark:begin */
  color-scheme: dark;
  --bg: #0e1513;
  --tint: #131c19;
  --surface: #111917;
  --ink: #e6ece9;
  --ink-2: #b2bfba;
  --ink-3: #8f9d97;
  --line: #212c28;
  --line-2: #2f3d38;
  --line-3: #485852;
  --disabled-fg: #56645e;
  --selection: #1d4a41;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --brand: #3dbfa3;
  --brand-hover: #74d6bf;
  --brand-mark: #1fa58d;
  --brand-tint: #102b26;
  --brand-line: #1f5a4e;
  --btn-bg: #1fa58d;
  --btn-bg-hover: #3bb89f;
  --btn-bg-active: #17907a;
  --btn-fg: #04201a;
  --us-cell: #0f221e;
  --night: #0a100e;
  --night-2: #131c19;
  --night-line: #222e2a;
  --night-fg: #e6ece9;
  --night-dim: #97a8a1;
  --night-strong: #ffffff;
  --night-link: #9fd9c9;
  --night-link-line: #2f5a4f;
  --code-bg: #16201d;
  --code-bar: #1b2622;
  --code-line: #2a3833;
  --code-border: #2a3833;
  --code-fg: #e4ebe8;
  --code-dim: #93a39c;
  --code-strong: #ffffff;
  --code-ln: #56665f;
  --code-hover-bg: #22302b;
  --code-hover-line: #44564f;
  --code-ok-line: #2c5a4c;
  --code-err-line: #6b2a24;
  --t-c: #84958e;
  --tj-fg: #e6ece9;
  --tj-s: #a5d6bd;
  --tj-k: #c3cdf2;
  --tj-kw: #efb995;
  --tj-n: #e9d58f;
  --m-get: #8ab8ee;
  --m-post: #3dbfa3;
  --m-patch: #e2b665;
  --m-delete: #f1958a;
  --shot-border: #33423c;
  --shot-bg: #f8f6f1;
  --icon-sun: block;
  --icon-moon: none;
  /* dark:end */
}

body { background: var(--bg); color: var(--ink); }
::selection { background: var(--selection); }