/*
  Design tokens. Every value used in style.css lives here.

  Fluid scale: a value grows linearly from its min at a 375px viewport to its max at 1024px,
  then stays flat. Formula: clamp(min, calc(a + b vw), max), where
    b = (max - min) / 6.49
    a = min - 3.75 * b
  round(..., 8px) snaps spacing and the logo to the 8px grid; font sizes use 1px.
  Line heights are fixed multiples of 8, so every line box starts and ends on the grid.
*/

:root {
  /* Color: dark (default) */
  --bg: #000;
  /* Card colors mirror the light theme: white at 7% on black (#131313), white at 10% on hover (#1b1b1b), no border */
  --card: #131313;
  --card-hover: #1b1b1b;
  --card-line: transparent;
  --card-line-hover: transparent;
  --fg: #f2f2f2;
  --dim: #9a9a9a;
  --faint: #666;
  --branch-color: #555;
  --line: #2a2a2a;
  --acc: #ebc514;
  --on-acc: #000;

  /* Font */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fw-bold: 700;

  /* Type: font sizes are fluid (14 -> 17px body, 18 -> 22px name, 12 -> 14px small), line heights are fixed. */
  --fs-base: round(clamp(14px, calc(12.27px + 0.462vw), 17px), 1px);
  --lh-base: 24px;
  --fs-lg: round(clamp(18px, calc(15.69px + 0.616vw), 22px), 1px);
  --lh-lg: 32px;
  --fs-sm: round(clamp(12px, calc(10.85px + 0.308vw), 14px), 1px);
  --tag-h: 24px;
  /* Baseline nudge. In a line box of height L the baseline sits at L/2 + metric * font-size, where metric = (ascent - descent) / 2 of a monospace font (about 0.35).
     The nudge moves the text so the baseline lands on an 8px grid line, whatever the font size. */
  --metric: 0.35;
  --nudge-base: calc(var(--lh-base) / 2 - 8px - var(--metric) * 1em);
  --nudge-lg: calc(var(--lh-lg) / 2 - 8px - var(--metric) * 1em);

  /* Space: vertical spacing is a multiple of 8, fluid ones step by 8px. --sp-1 (4px) is for inner pill padding only. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: round(clamp(16px, calc(11.38px + 1.233vw), 24px), 8px);
  --sp-5: round(clamp(24px, calc(19.38px + 1.233vw), 32px), 8px);
  --sp-6: round(clamp(32px, calc(22.75px + 2.465vw), 48px), 8px);
  --sp-7: round(clamp(40px, calc(26.13px + 3.698vw), 64px), 8px);

  /* Layout */
  --gutter: var(--sp-4);
  --measure: 82ch;
  --card-text-x: calc(var(--border) + var(--sp-4) + var(--indent));
  --indent: 2ch;
  --logo-w: round(clamp(192px, calc(174px + 4.8vw), 240px), 48px);
  --avatar-size: round(clamp(96px, calc(59.02px + 9.861vw), 160px), 8px);

  /* Terminal touches */
  --bullet: "●";
  --branch: "⎿";
  --branch-shift: -0.3ch;
  --branch-lift: -0.2ch;

  /* Shape */
  --border: 1px;
  --radius: 10px;
  --radius-pill: 999px;
  --icon-size: 20px;
  --snap-size: 48px;
  --tap: 48px;
  --snap-gap: var(--sp-4);
  --snap-label-w: 15ch;
  --z-snap: 900;
  --z-grid: 1000;

  /* Grid overlay (dev tool, key G) */
  --grid: 8px;
  --grid-line: color-mix(in srgb, var(--acc) 40%, transparent);

  /* Motion */
  --ease: 0.3s ease;
  --scroll-min: 400;
  --scroll-max: 1000;
  --scroll-speed: 0.35;
  --transition: background-color var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), opacity var(--ease), visibility var(--ease), max-width var(--ease);
  --hover-scale: 1.01;
  --icon-turn: 90deg;
}

:root[data-theme="light"] {
  /* Card colors come from the old site: black at 5% on white (#f2f2f2), black at 8% on hover (#ebebeb) */
  --bg: #fff;
  --card: #f2f2f2;
  --card-hover: #ebebeb;
  --card-line: transparent;
  --card-line-hover: transparent;
  --fg: #111;
  --dim: #555;
  --faint: #8a8a8a;
  --branch-color: #a8a8a8;
  --line: #d8d8d5;
  --acc: #f4ce32;
}