/* ============================================================ HLE — Design tokens for the marketing site (website/*.html). Single source of truth for colour, type, and layout constants on the landing pages. Reference var(--token); never redeclare. Theming: dark is the default. The light palette is selected by [data-theme="light"] on , which is the same attribute the docs (Astro Starlight) and privacy/terms pages already use and which site-chrome.js sets from localStorage `hle-theme`. NOTE: the docs theme has its own Starlight token layer (docs-src/src/styles/custom.css, --sl-* / --hle-*). These two are deliberately separate; only the palette values are kept in visual agreement. Cheat sheet ─────────── Colour --bg / --bg-raised / --surface / --surface-hi page → card surfaces --border / --border-hi hairlines, hover states --text primary text on --bg (never pure white) --text-dim secondary / supporting copy --text-xdim captions, timestamps, fine print --accent brand mint (CTAs, links, highlights) --accent-dim pressed / gradient end --accent-glow soft accent halo (shadow / bg tint) --warn / --hot semantic accents (yellow / orange) --link non-brand link colour (used sparingly) --code-bg / --code-border / --code-text / --code-str code block surfaces and syntax colours Typography --font-display 'Syne' h1–h3, brand mark, stat values --font-body 'DM Sans' body copy, UI labels — the default --font-mono 'JetBrains Mono' code, terminal, eyebrows, buttons, labels Layout --max-w page max width (1120px) --radius default corner radius (10px) ============================================================ */ :root, :root[data-theme="dark"] { /* surfaces */ --bg: #0e1018; --bg-raised: #161a24; --surface: #1e222e; --surface-hi: #252a38; --border: #262b3c; --border-hi: #3a4159; /* text */ --text: #e8ecf5; --text-dim: #8a92ad; --text-xdim: #545a76; /* brand + semantic */ --accent: #00ffaa; --accent-dim: #00cc88; --accent-glow: rgba(0, 255, 170, 0.14); --accent-glow2: rgba(0, 255, 170, 0.05); --warn: #ffd866; --hot: #ff6b2c; --link: #66b3ff; /* code — syntax colours are code-surface specific rather than reuses of --accent / --warn, because the code block stays dark in both themes (see the light block below) and so its foreground must not follow the page. */ --code-bg: #0a0c14; --code-border: #1d2235; --code-text: #d5dbe4; /* default

 foreground */
  --code-cmd:      #00ffaa;  /* $ prompt, command name */
  --code-flag:     #ffd866;  /* --flags */
  --code-str:      #a5e8cd;  /* flag values, strings */
  --code-comment:  #545a76;  /* # comments */

  /* effects */
  --grid-dot:   rgba(255, 255, 255, 0.05);
  --grid-line:  rgba(255, 255, 255, 0.04);
  --pop-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);

  /* nav backdrop — a translucent wash of --bg. Declared per theme rather
     than derived so the blurred header keeps enough contrast in light mode,
     where a straight alpha-reduced --bg reads as washed out. */
  --nav-bg: rgba(14, 16, 24, 0.82);
}

:root[data-theme="light"] {
  --bg:         #fafaf7;
  --bg-raised:  #ffffff;
  --surface:    #f4f3ee;
  --surface-hi: #ecebe3;
  --border:     #e7e5dd;
  --border-hi:  #d4d2c8;

  --text:       #1a1d2b;
  --text-dim:   #5e6478;
  --text-xdim:  #9499a8;

  --accent:       #009b6a;
  --accent-dim:   #007a55;
  --accent-glow:  rgba(0, 155, 106, 0.10);
  --accent-glow2: rgba(0, 155, 106, 0.04);
  --warn:         #b8881a;
  --hot:          #d8552a;
  --link:         #2c79c9;

  /* The code block stays dark in light mode — a terminal reads as a terminal,
     and keeping it dark means the syntax colours below need no light variant
     and stay well above contrast minimums in both themes. */
  --code-bg:       #12151f;
  --code-border:   #232838;
  --code-text:     #d5dbe4;
  --code-cmd:      #00ffaa;
  --code-flag:     #ffd866;
  --code-str:      #a5e8cd;
  --code-comment:  #767e99;

  --grid-dot:   rgba(0, 0, 0, 0.06);
  --grid-line:  rgba(0, 0, 0, 0.04);
  --pop-shadow: 0 20px 60px rgba(20, 30, 50, 0.08);

  --nav-bg: rgba(250, 250, 247, 0.85);
}

/* Typography + layout (theme-agnostic) */
:root {
  --font-display: 'Syne', ui-sans-serif, -apple-system, "Inter", system-ui, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, -apple-system, "Inter", system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, "SFMono-Regular", "Menlo", monospace;

  --max-w:  1120px;
  --radius: 10px;

  /* Literal UI chrome rendered inside the hero animation: the three window
     traffic lights and the mouse pointer. These depict a real OS, not the HLE
     palette, so they are the same in both themes and must not follow --accent. */
  --tl-red:        #ff5f57;
  --tl-amber:      #febc2e;
  --tl-green:      #28c840;
  --cursor-fill:   #ffffff;
  --cursor-stroke: #0b0d13;
}