/* Shared tokens for all variants (draft 6.10). Light theme only.
   Spacing: one 8px grid. Type: a closed scale of six sizes.
   Colors and fonts are set per variant. */
:root {
  /* spacing (8px grid) */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;
  --s12: 96px;
  --s16: 128px;

  /* type scale (closed): 14 / 16 / 20 / 28 / 40 / 64 */
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-28: 1.75rem;
  --t-40: 2.5rem;
  --t-64: clamp(2.5rem, 5.6vw, 4rem);

  /* layout */
  --container: 1120px;
  --gutter: 32px;
  --measure: 680px;      /* reading column */
  --radius: 16px;
  --radius-s: 8px;
  --radius-l: 32px;      /* work cards on the home page, like the reference */
  --header-h: 72px;

  /* motion: one entry pattern */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-entry: 400ms;
  --rise: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* entry motion (transform + opacity only) */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition:
    opacity var(--dur-entry) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-entry) var(--ease-out) var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Color and fonts (draft 6.10, see ../../tokens.md). New --color-* and --font-* names only,
   so the variants that define their own --ink, --accent and so on are not affected. */
:root {
  /* 7.10: black and neutral greys, one accent (lime). The deep green and the violet, blue and orange hues were removed. */
  --color-surface-page: #ffffff;
  --color-surface-subtle: #f5f5f5;
  --color-content-primary: #111111;
  --color-content-secondary: #595959;
  --color-content-inverse: #ffffff;
  --color-line: #e5e5e5;
  --color-line-soft: #efefef;          /* footer hairline, softer like the reference */
  --color-accent-lime: #c8f032;      /* fill only, never text on white */
  --color-accent-on-lime: #111111;
  --color-content-muted: #9d9da3;      /* footer line and nav at rest, like the reference */
  --color-content-soft: #444444;       /* footer email, dark grey not black */
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.03), 0 8px 24px rgba(17, 17, 17, 0.045);  /* soft shadow of the work cards, like the reference */
  --color-icon-muted: #d0d0d4;       /* footer icons at rest, light grey like the reference */

  --font-head: "Onest", system-ui, sans-serif;
  --font-body: "Geist", system-ui, sans-serif;
}