/* 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). Colours are
   authored in oklch on purpose: the iron green ramp holds a consistent hue
   that hex conversion tends to flatten. */

/* ==== tokens/fonts.css ==== */
/* Webfont. One family: the logotype is drawn artwork, not type.
   Bitter is SIL Open Font License: free for commercial, product, print,
   embroidery and engraving use with no royalty.
   Do not add a second without a reason that survives being written down. */
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ==== tokens/colors.css ==== */
/* Anvil Golf colour system.

   The page is dark. Iron green: a deep, low-chroma green-grey that reads warm
   and deep without ever being nameable as "a green brand". Every neutral is on
   the same hue, so nothing in the system is truly grey.

   There is no metal accent. Brass and copper are the reflex move for luxury at
   this price, which is exactly why every competitor already has them. The accent
   here is simply a much lighter tint of the page. That refusal is the discipline
   that makes the rule below true.

   THE PUTTER IS THE ONLY REAL COLOUR ON ANY PAGE. Nothing else in this file
   introduces a hue that competes with a photograph of the object. */
:root {
  /* Iron green surfaces, dark to light */
  --iron-950: oklch(0.138 0.012 150);  /* deepest: footer, full-bleed wells */
  --iron-900: oklch(0.186 0.014 150);  /* the page */
  --iron-800: oklch(0.228 0.015 150);  /* cards, raised panels */
  --iron-700: oklch(0.268 0.016 150);  /* product mat */
  --iron-600: oklch(0.318 0.016 150);  /* rules, borders */
  --iron-500: oklch(0.400 0.016 148);  /* strong rules, disabled edges */

  /* Cream, warm-leaning so the page never reads clinical */
  --cream-100: oklch(0.958 0.010 110); /* primary text */
  --cream-200: oklch(0.878 0.014 120); /* headings on cards */
  --cream-300: oklch(0.762 0.016 130); /* secondary text */
  --cream-400: oklch(0.668 0.016 135); /* tertiary text. Large sizes only. */

  /* Accent: a lighter tint of the page. No new hue enters the system. */
  --accent-300: oklch(0.80 0.052 145);
  --accent-400: oklch(0.72 0.048 145);
  --accent-200: oklch(0.87 0.040 145);

  /* Light ground. Used only where a light surface is unavoidable:
     print, email, the type spec sheet, a photograph mat. */
  --paper: oklch(0.966 0.012 110);
  --paper-mat: oklch(0.912 0.014 120);

  /* Status. Held to the same chroma discipline as everything else. */
  --positive: oklch(0.72 0.070 148);
  --caution: oklch(0.78 0.075 92);
  --critical: oklch(0.68 0.105 32);

  /* ---- Semantic aliases: use these in components, never the ramp ---- */
  --text-primary: var(--cream-100);
  --text-secondary: var(--cream-300);
  --text-tertiary: var(--cream-400);
  --text-accent: var(--accent-300);
  --text-on-light: var(--iron-900);
  --text-link: var(--cream-100);
  --text-link-hover: var(--accent-300);

  --surface-page: var(--iron-900);
  --surface-deep: var(--iron-950);
  --surface-card: var(--iron-800);
  --surface-well: var(--iron-800);
  --surface-mat: var(--iron-700);
  --surface-light: var(--paper);
  --surface-light-mat: var(--paper-mat);

  --border-hairline: var(--iron-600);
  --border-rule: var(--iron-500);
  --border-strong: var(--cream-100);
  --border-accent: var(--accent-300);

  --focus-ring: var(--accent-300);
}

/* ==== tokens/typography.css ==== */
/* One typeface. The logotype is drawn artwork, not type, so Bitter carries
   every word on every surface: headlines, body, interface, and evidence.
   Difference in register is made with weight, case, size and tracking.

   Bitter is a slab, chosen to match the drawn mark: even weight, no delicate
   strokes, nothing that falls apart when it is cut, stitched or set small.

   Model designations (NO. 1) are set in Bitter semibold, not in the mark.

   Evidence (specs, lot numbers, prices) is Bitter 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-text: "Bitter", Georgia, "Times New Roman", 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-model: var(--weight-semibold) var(--size-xl)/1 var(--font-text);
}

/* 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. On a dark page, depth comes from surface steps within the
   iron ramp, from hairline rules, and from negative space. Never from glow.
   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.100 0.012 150 / 0.06), 0 8px 24px oklch(0.100 0.012 150 / 0.05);
  --shadow-overlay: 0 24px 64px oklch(0.100 0.012 150 / 0.16);
  --shadow-inset-well: inset 0 1px 0 oklch(0.100 0.012 150 / 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: dark; }
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(--accent-300); color: var(--iron-900); }