/* lampwick marketing site: design tokens. THE place to polish the look.
 *
 * Every colour is written once as light-dark(<light>, <dark>), so there is no separate dark block to
 * keep in sync. The theme follows the OS; <html data-theme="light|dark"> forces one (the style guide
 * has a toggle). Values mirror static/app.css of the app so site and product feel like one thing:
 * when you change a colour here, ask whether the app should change too.
 *
 * Rules for these tokens are in site/DESIGN.md. Components never use raw hex values: add a token.
 */

@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Display face: Lampwick Display, a subset of Mona Sans (OFL; see fonts/OFL-lampwick-display.txt).
   Variable: wdth 100–112.5, wght 500–700, opsz 0–30. Same face and tokens as static/app.css. */
@font-face { font-family: "Lampwick Display"; src: url("fonts/lampwick-display.woff2") format("woff2-variations"), url("fonts/lampwick-display.woff2") format("woff2"); font-weight: 500 700; font-stretch: 100% 112.5%; font-display: swap; }
/* Fallback while it loads: Arial matched to the display face's width and vertical metrics, so
   headings keep their line breaks when it swaps in. Two faces, because Arial has one width: the
   wider settings (106%, 112.5%) get a larger size-adjust, with ascent/descent scaled back so line
   boxes stay the same. */
@font-face { font-family: "Lampwick Display Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"); font-stretch: 100% 104%; size-adjust: 109%; ascent-override: 100.1%; descent-override: 29.4%; line-gap-override: 0%; }
@font-face { font-family: "Lampwick Display Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"); font-stretch: 104.01% 112.5%; size-adjust: 111%; ascent-override: 98.3%; descent-override: 28.9%; line-gap-override: 0%; }

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  /* Surfaces: page → panel → raised. Same ladder as the app. */
  --bg: light-dark(#f5f5f7, #161618);
  --bg-sunk: light-dark(#ececf0, #111113);       /* bands that sit "below" the page */
  --panel: light-dark(#ffffff, #1f1f22);
  --panel-2: light-dark(#f4f4f7, #26262a);
  --panel-3: light-dark(#e9e9ee, #2e2e33);
  --code-bg: light-dark(#f6f6f9, #141416);
  --frame: #1d1d1f;                              /* the app frame: always dark, also in light mode */

  /* Lines */
  --border: light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .07));
  --border-strong: light-dark(rgb(0 0 0 / .13), rgb(255 255 255 / .12));
  --ring: light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .12));

  /* Text */
  --text: light-dark(#2c2c30, #e8e8ed);
  --text-strong: light-dark(#1d1d1f, #f5f5f7);
  --muted: light-dark(rgb(60 60 67 / .76), rgb(235 235 245 / .55));   /* light .76: AA on --bg (app.css has .68; should follow) */
  --faint: light-dark(rgb(60 60 67 / .36), rgb(235 235 245 / .28));

  /* Accent = the app's blue. One accent; status colours are not decoration. */
  --accent: light-dark(#007aff, #0a84ff);
  --accent-hover: light-dark(#0068d9, #2490ff);
  /* Text links and white-on-blue fills need more contrast than the accent gives on --bg (3.7:1):
     --link for links in text, --accent-fill for primary buttons (white text ≥ 4.5:1 in both themes).
     The app (static/app.css) still uses the accent for both; it should follow. */
  --link: light-dark(#0066cc, #0a84ff);
  --link-hover: light-dark(#004f9e, #4da3ff);
  --accent-fill: #0068d9;
  --accent-fill-hover: #0058b8;
  --accent-soft: light-dark(rgb(0 122 255 / .1), rgb(10 132 255 / .16));
  --ok: light-dark(#1f9d47, #30d158);
  --warn: light-dark(#c76a00, #ff9f0a);
  --bad: light-dark(#e0332b, #ff453a);
  --bad-text: light-dark(#c02a22, #ff6961);     /* error text: AA on --bg and --panel (as app.css) */

  /* LED matrix palette (assets/matrix.js reads these; see "Brand elements" in DESIGN.md).
     lamp = the lighthouse light, sea = water and healthy signal (the accent), bad = errors/downtime,
     ink = structure (tower, rock, wick), off = an unlit LED. */
  --m-lamp: light-dark(rgb(250 150 20), rgb(255 197 61));
  --m-sea: var(--accent);
  --m-bad: light-dark(#f03e3e, #ff3b30);
  --m-ink: var(--text-strong);
  --m-off: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .05));
  --m-cell: 5px;                                  /* LED size … */
  --m-gap: 2px;                                   /* … and the dark gap between LEDs */

  /* Elevation: a hairline ring plus soft layered shadow (after the app). light-dark() only takes
     colours, so the shadow colours are tokens and the shapes are shared. */
  --sh-ring: light-dark(rgb(0 0 0 / .055), rgb(255 255 255 / .06));
  --sh-top: light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / .04));  /* inner top highlight, dark only */
  --sh-near: light-dark(rgb(0 0 0 / .04), rgb(0 0 0 / .25));
  --sh-far: light-dark(rgb(0 0 0 / .08), rgb(0 0 0 / .35));
  --shadow: 0 0 0 1px var(--sh-ring), inset 0 1px 0 var(--sh-top), 0 1px 2px var(--sh-near), 0 6px 12px -3px var(--sh-near), 0 18px 36px -10px var(--sh-far);
  --shadow-lg: 0 0 0 1px var(--sh-ring), inset 0 1px 0 var(--sh-top), 0 4px 8px -2px var(--sh-near), 0 24px 48px -12px var(--sh-far), 0 48px 96px -24px var(--sh-far);

  /* Type. Display = Lampwick Display (Mona Sans subset: headings, hero, prices, wordmark),
     body = Geist, code = Geist Mono. */
  --display: "Lampwick Display", "Lampwick Display Fallback", "Geist", system-ui, sans-serif;
  /* Display width (wdth axis via font-stretch) and weight: wide and heavy for big type, closing
     towards normal as headings get smaller, where expanded letters waste space and blur. */
  --display-wide: 112.5%;     /* hero h1, prices: semi-expanded */
  --display-mid: 106%;        /* h2, page h1, wordmark */
  --display-normal: 100%;     /* h3, prose headings */
  --fw-display: 640;
  /* Optical size: Mona Sans's opsz runs 0 (text) to 100 (tightest display) and is not in points, so
     font-optical-sizing: auto would make big headings cramped. Set explicitly; the font ships 0–30. */
  --display-opsz: 30;
  --display-opsz-small: 0;
  --fw-display-small: 600;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  /* Fluid scale: min at 375px, max at 1280px wide. */
  --fs-hero: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.075rem, 1rem + .35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-label: .75rem;
  /* Content pages (docs, blog): smaller headings than the landing page, for reading. */
  --fs-page-h1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --fs-prose-h2: 1.5rem;
  --fs-prose-h3: 1.125rem;
  --docs-nav: 220px;                                  /* docs sidebar width */
  --docs-toc: 200px;                                  /* "on this page" width */

  /* Space: a 4px base, named by use, not by size. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --section: clamp(var(--s-8), 10vw, var(--s-10));  /* vertical padding of a <section> */
  --gutter: clamp(16px, 4vw, 32px);                  /* page side padding */
  --measure: 62ch;                                    /* max line length of running text */
  --container: 1160px;

  /* Radius: same three as the app, plus the pill. */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;

  /* Motion: the app's curves. UI moves smooth and short; LED elements step (see matrix.js). */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-fast: 120ms; --t: 200ms; --t-slow: 480ms;
}