/* VirJual design tokens.
 *
 * These are the Modernist design system's real values, taken from the design
 * project (`design/_ds/modernist-…/styles.css`), not an interpretation of it.
 * Regenerate rather than hand-edit: the design project is the source of truth
 * for this file, and `design/` in this repo is its mirror.
 *
 * Two overrides the project locked in on top of the system, both recorded in
 * design/CLAUDE.md:
 *
 *   - Type is Sora over Outfit, not the system's Archivo.
 *   - Photography is full colour, not the system's grayscale treatment.
 *
 * And one restraint that matters more than any value here: the system ships a
 * vermilion accent, and this site does not use it in the layout. Colour in the
 * layout is ink on paper. The blue is a cue — the wordmark's .shop, an arrow,
 * a small tag, a 2px rule — and nothing else.
 */

:root {
  /* ground and ink ------------------------------------------------- */
  --paper:        #f3f2f2;   /* --color-bg */
  --surface:      #eae9e9;   /* --color-surface */
  --ink:          #201e1d;   /* --color-text */

  --neutral-100:  #f8f4f4;
  --neutral-200:  #eae7e7;
  --neutral-300:  #d7d3d3;
  --neutral-400:  #bab6b6;
  --neutral-500:  #9b9797;
  --neutral-600:  #7d7979;
  --neutral-700:  #605d5d;
  --neutral-800:  #444141;
  --neutral-900:  #2d2b2b;

  /* Named for how they are used, so a template never reaches for a number. */
  --ink-80: var(--neutral-800);
  --ink-60: var(--neutral-600);
  --ink-40: var(--neutral-400);
  --ink-20: var(--neutral-300);
  --ink-10: var(--neutral-200);
  --ink-05: var(--neutral-100);
  --paper-warm: var(--neutral-100);

  --divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* the cue --------------------------------------------------------- */
  --blue:       #079FFC;
  --blue-dark:  #0679bd;
  --blue-wash:  rgba(7, 159, 252, 0.08);

  /* The system's accent. Present so the system stays whole, deliberately
     unused in layout — see the note at the top before reaching for it. */
  --system-accent: #ec3013;

  /* type ------------------------------------------------------------ */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  /* The system's weight. Only the home page steps down to 700 — every other
     page inherits this, which is the opposite of what I first assumed. */
  --font-heading-weight: 800;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.13rem + 0.42vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.4rem, 1.6rem + 3.6vw, 4.8rem);
  --step-5:  clamp(3rem, 1.5rem + 6.4vw, 7rem);

  /* The system's own heading metrics, not an approximation of them. */
  --heading-leading: 1.12;
  --heading-tracking: -0.015em;
  --body-size: 15px;
  --body-leading: 1.55;
  --body-weight: 400;

  --h1: 42px;
  --h2: 32px;
  --h3: 25px;
  --h4: 20px;
  --h5: 16px;
  --h6: 13px;

  --tracking-tight: -0.015em;
  --tracking-wide:  0.14em;

  /* space — the system's 4px base, continued past its last step ------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;
  --space-10: 160px;

  --measure:      68ch;
  --gutter:       clamp(1.25rem, 1rem + 2vw, 3rem);
  --page-max:     1560px;
  --content-max:  1200px;

  /* Square corners are a system decision, not an oversight. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  --rule:      1px solid var(--ink-10);
  --rule-ink:  2px solid var(--ink);
  --rule-blue: 2px solid var(--blue);

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  800ms;

  --header-h: 72px;
}

@media (max-width: 700px) {
  :root { --header-h: 60px; }
}

/* The site is light by design. A visitor in dark mode gets the same paper the
   photography was retouched against, rather than an inverted layout nobody
   approved. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}