/* Anvil Golf: holding page stylesheet.
   Flattened from the design system's token files for a single page deploy.
   Source of truth is the design system repo (tokens/*.css); if a token changes
   there, change it here too. Colours are authored in oklch on purpose: the
   neutral ramp carries a consistent warmth that hex conversion tends to lose.
   Browser support for oklch is universal in current evergreen browsers. */

/* ==== tokens/fonts.css ==== */
/* Webfonts. Two families, both SIL Open Font License: free for commercial,
   product, print, embroidery and engraving use with no royalty.
   Do not add a third without a reason that survives being written down. */
@import url("https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Archivo:wght@400;500;600;700&display=swap");

/* ==== tokens/colors.css ==== */
/* Anvil Golf colour system.
   Near-achromatic: imagery is black & white and the only real colour in a
   layout is the putter itself. The neutrals are warm: paper, not white; iron,
   not grey: and one accent, oxide, appears in hairline quantities. */
:root {
  /* Iron: warm neutral ramp, low chroma, hue 62 (brown-grey rather than blue-grey) */
  --ink-900: oklch(0.180 0.018 58);
  --ink-800: oklch(0.250 0.020 58);
  --ink-700: oklch(0.370 0.020 58);
  --ink-600: oklch(0.510 0.019 60);
  --ink-500: oklch(0.630 0.018 64);
  --ink-400: oklch(0.760 0.017 70);
  --ink-300: oklch(0.860 0.019 76);
  --ink-200: oklch(0.918 0.021 80);
  --ink-100: oklch(0.952 0.023 82);
  --paper: oklch(0.966 0.028 83);      /* aged paper stock */
  --paper-pure: oklch(0.984 0.018 83);

  --pitch: oklch(0.165 0.020 48);      /* iron with heat still in it */
  --pitch-raised: oklch(0.220 0.022 48);

  /* Oxide: the primary accent. Iron that has seen air: rust-brown, not orange. */
  --oxide-700: oklch(0.42 0.088 48);
  --oxide-600: oklch(0.50 0.105 48);
  --oxide-500: oklch(0.60 0.100 50);
  --oxide-300: oklch(0.80 0.055 58);
  --oxide-100: oklch(0.94 0.026 62);

  /* Forge: heat. Used almost never: a single hairline, a hover, a hot spot. */
  --forge-500: oklch(0.66 0.150 42);

  /* Brass: the secondary warm metal, for stamped/engraved contexts */
  --brass-600: oklch(0.55 0.070 82);
  --brass-500: oklch(0.65 0.075 84);
  --brass-400: oklch(0.76 0.058 86);
  --brass-100: oklch(0.945 0.024 86);

  --steel-600: oklch(0.52 0.020 250);
  --steel-400: oklch(0.72 0.018 250);

  --positive: oklch(0.50 0.070 145);
  --caution: oklch(0.60 0.085 72);
  --critical: oklch(0.48 0.115 30);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-inverse: var(--paper);
  --text-inverse-secondary: oklch(0.735 0.022 68);
  --text-accent: var(--oxide-600);
  --text-link: var(--ink-900);
  --text-link-hover: var(--oxide-600);

  --surface-page: var(--paper);
  --surface-card: var(--paper-pure);
  --surface-well: var(--ink-100);
  --surface-inverse: var(--pitch);
  --surface-inverse-raised: var(--pitch-raised);
  --surface-mat: var(--ink-100);

  --border-hairline: var(--ink-200);
  --border-rule: var(--ink-300);
  --border-strong: var(--ink-900);
  --border-accent: var(--oxide-500);
  --border-inverse: oklch(0.315 0.022 52);

  --focus-ring: var(--oxide-600);
}

/* ==== tokens/typography.css ==== */
/* Two families. Every typographic decision is one of these two, and the
   difference between registers is carried by weight, case, size and tracking
   rather than by adding another face.

   Bowlby One SC : the block. The wordmark, and model designations. Nothing else.
   Archivo       : everything else. Headlines, body, interface, and evidence.

   Evidence (specs, lot numbers, prices) is Archivo with tabular figures and
   open tracking, not a monospace. Any role that shows figures in a column must
   also set  font-variant-numeric: tabular-nums  (it cannot ride in the CSS
   font shorthand, so it is applied at the call site or via --numeric-tabular). */
:root {
  --font-display: "Bowlby One SC", "Arial Black", sans-serif;
  --font-text: "Archivo", Helvetica, "Helvetica Neue", Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Scale: 1.25 minor third, hand-tuned at the display end */
  --size-3xs: 10px;
  --size-2xs: 11px;
  --size-xs: 12px;
  --size-sm: 14px;
  --size-md: 16px;
  --size-lg: 19px;
  --size-xl: 23px;
  --size-2xl: 29px;
  --size-3xl: 38px;
  --size-4xl: 52px;
  --size-5xl: 72px;
  --size-6xl: 104px;

  --leading-tight: 1.04;
  --leading-snug: 1.16;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  --tracking-display: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-label: 0.16em;      /* uppercase labels and eyebrows */
  --tracking-spec: 0.04em;       /* figures and spec values */
  --tracking-mark: 0.02em;       /* the wordmark */
  --tracking-descriptor: 0.5em;  /* a line set to the wordmark's width */

  --numeric-tabular: tabular-nums;

  /* Semantic roles. Use these, not the raw families. */
  --type-display: var(--weight-semibold) var(--size-5xl)/var(--leading-tight) var(--font-text);
  --type-headline: var(--weight-semibold) var(--size-3xl)/var(--leading-snug) var(--font-text);
  --type-title: var(--weight-medium) var(--size-2xl)/var(--leading-snug) var(--font-text);
  --type-subtitle: var(--weight-regular) var(--size-lg)/var(--leading-normal) var(--font-text);
  --type-body-lead: var(--weight-regular) var(--size-lg)/var(--leading-relaxed) var(--font-text);
  --type-body: var(--weight-regular) var(--size-md)/var(--leading-relaxed) var(--font-text);
  --type-ui: var(--weight-medium) var(--size-sm)/1.3 var(--font-text);
  --type-caption: var(--weight-regular) var(--size-xs)/1.45 var(--font-text);
  --type-label: var(--weight-semibold) var(--size-2xs)/1.2 var(--font-text);
  --type-spec: var(--weight-regular) var(--size-sm)/1.5 var(--font-text);
  --type-wordmark: var(--weight-regular) var(--size-4xl)/1 var(--font-display);
  --type-model: var(--weight-regular) var(--size-xl)/1 var(--font-display);
}

/* Roles that carry figures get tabular numerals by default wherever the
   shorthand is used, so columns of specs and prices always align. */
[style*="--type-spec"], [style*="--type-label"] { font-variant-numeric: tabular-nums; }

/* ==== tokens/spacing.css ==== */
/* 4px base. Marketing layouts breathe at the top of the scale. */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 176px;

  --gutter: var(--space-6);
  --section-y: var(--space-10);
  --section-y-tight: var(--space-9);
  --page-max: 1440px;
  --measure: 62ch;
  --measure-narrow: 46ch;
}

/* ==== tokens/lines.css ==== */
/* Radii and rules. The brand is square: hairlines do the work borders would. */
:root {
  --radius-none: 0px;
  --radius-xs: 1px;
  --radius-sm: 2px;   /* inputs, buttons: barely there */
  --radius-md: 3px;
  --radius-pill: 999px; /* small mono badges only */

  --hairline: 1px;
  --rule: 1px;
  --rule-strong: 2px;

  --border-default: var(--hairline) solid var(--border-hairline);
  --border-emphasis: var(--hairline) solid var(--border-rule);
}

/* ==== tokens/elevation.css ==== */
/* Almost no shadow. Depth comes from mats, rules and negative space.
   Photographs never carry a drop shadow. */
:root {
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-lift: 0 1px 2px oklch(0.180 0.018 58 / 0.06), 0 8px 24px oklch(0.180 0.018 58 / 0.05);
  --shadow-overlay: 0 24px 64px oklch(0.180 0.018 58 / 0.16);
  --shadow-inset-well: inset 0 1px 0 oklch(0.180 0.018 58 / 0.05);
}

/* ==== tokens/motion.css ==== */
/* Motion is a fade and a small rise. Nothing bounces, nothing springs. */
:root {
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 80ms;
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 480ms;
  --duration-reveal: 900ms;

  --transition-ui: all var(--duration-fast) var(--ease-standard);
  --transition-reveal: opacity var(--duration-reveal) var(--ease-entrance),
                       transform var(--duration-reveal) var(--ease-entrance);
  --rise: 12px;
}

/* ==== tokens/base.css ==== */
/* Minimal resets so specimen cards and kits share a baseline. */
:root { color-scheme: light; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  text-wrap: pretty;
}
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-regular); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }
*:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--oxide-100); }