/*
 * Design tokens — every globally-defined custom property, hand-maintained, no build step.
 * Two tiers: `base` is a primitive, `role` a semantic slot; a component token lives in its own
 * block's stylesheet. Render-blocking, so values and one-line notes only. Ratios are WCAG
 * contrast on white and `!` flags a divergence from the reference; both are argued in
 * docs/design-tokens.md, alongside docs/adrs/adr-2-central-design-token-architecture.md.
 */

:root {
  /* ─── base: colour ─── hue + lightness step, 05 light … 95 dark */

  --color-base-teal-50: #00a5a4; /* surface teal: control borders, category pills — 3.04:1 */
  --color-base-teal-60: #00817d; /* ink teal: wordmark, links, nav hover — 4.73:1 */
  --color-base-teal-80: #005f5b; /* ours: link hover — 7.53:1 */
  --color-base-teal-90: #006e6b; /* ours: filled-control hover — white on it 6.10:1 */

  /* neutrals */
  --color-base-slate-30: #a6b8c1; /* rules; the reference only uses it at 20–50% alpha */
  --color-base-slate-50: #586f78; /* footer band, muted copy — white on it 5.30:1 */
  --color-base-slate-80: #3c464e; /* paragraph copy — 9.65:1 */
  --color-base-slate-90: #333f48; /* nav, headings, byline, captions — 10.79:1 */
  --color-base-slate-95: #26313a; /* video facade, hero scrim, dark states — 13.27:1 */
  --color-base-neutral-white: #fff;
  --color-base-neutral-05: #f8f8f8; /* dropdown panel, avatar placeholder, disabled control */

  /* accent */
  --color-base-amber-70: #b05f00; /* ! editorial accent; the reference's `orange` is 1.97:1 — 4.68:1 */

  /* pink */
  --color-base-pink-60: #f83458; /* CTA and deal pills; white on it 3.73:1, so large text only */
  --color-base-pink-70: #d42a4a; /* ours: its hover, and what a small label on pink needs — 4.97:1 */

  /* ─── base: typography ─── px, not rem (docs/design-tokens.md § Units) ─── */

  --font-family-base-body: montserrat, montserrat-fallback, 'Helvetica Neue', arial, sans-serif;
  --font-family-base-display: trade-gothic-next-compressed, trade-gothic-fallback, oswald, 'Arial Narrow', 'Liberation Sans Narrow', sans-serif;

  /* sizes */
  --font-size-base-10: 10px;
  --font-size-base-12: 12px;
  --font-size-base-14: 14px;
  --font-size-base-16: 16px;
  --font-size-base-18: 18px;
  --font-size-base-20: 20px;
  --font-size-base-22: 22px;
  --font-size-base-26: 26px;
  --font-size-base-32: 32px;
  --font-size-base-40: 40px;
  --font-size-base-48: 48px;
  --font-size-base-56: 56px;

  /* leadings */
  --line-height-base-flat: 1;     /* measured: 56/56, 48/48, 40/40 on every heading */
  --line-height-base-normal: 1.5; /* measured: body copy, both button tiers (16/24, 20/30) */

  /* weights */
  --font-weight-base-regular: 400;
  --font-weight-base-medium: 500;
  --font-weight-base-semibold: 600;
  --font-weight-base-bold: 700;

  /* tracking */
  --letter-spacing-base-caps: 1.6px; /* flat at every size, exactly as measured */
  --letter-spacing-base-wide: 1px;   /* the acknowledgement of Country */

  /* ─── base: space, radius, border ─── measured px, not a ladder; 15 and 18 are off-grid ─── */
  --space-base-4: 4px;
  --space-base-10: 10px;
  --space-base-12: 12px;
  --space-base-15: 15px;
  --space-base-16: 16px;
  --space-base-18: 18px;
  --space-base-20: 20px;
  --space-base-30: 30px;
  --space-base-32: 32px;
  --space-base-40: 40px;

  /* radii */
  --radius-base-0: 0;
  --radius-base-8: 8px;

  /* border widths */
  --border-width-base-1: 1px;
  --border-width-base-2: 2px;

  /* ─── role: colour ─── */

  --color-role-surface: var(--color-base-neutral-white);
  --color-role-surface-muted: var(--color-base-neutral-05);
  --color-role-surface-inverse: var(--color-base-slate-95);
  --color-role-text: var(--color-base-slate-80);
  --color-role-text-heading: var(--color-base-slate-90);
  --color-role-text-caption: var(--color-base-slate-90);
  --color-role-text-muted: var(--color-base-slate-50);
  --color-role-text-on-inverse: var(--color-base-neutral-white);

  /* editorial accent */
  --color-role-accent-editorial: var(--color-base-amber-70); /* the page h1 and in-article h2, the two levels the reference colours */

  /* links */
  --color-role-link: var(--color-base-teal-60);
  --color-role-link-hover: var(--color-base-teal-80); /* ! they ship no hover; ours pairs this with an underline (WCAG 1.4.1) */
  --color-role-brand: var(--color-base-teal-60);

  /* rules and borders */
  --color-role-rule: var(--color-base-slate-30);
  --color-role-rule-soft: color-mix(in srgb, var(--color-base-slate-30) 50%, transparent);   /* hr, byline hairlines */
  --color-role-border-card: color-mix(in srgb, var(--color-base-slate-90) 20%, transparent); /* rgba(51,63,72,0.2) → #d6d9db on white */

  /* full-bleed bands */
  --color-role-surface-band: var(--color-base-slate-50);
  --color-role-surface-band-closing: color-mix(in srgb, var(--color-base-slate-90) 40%, transparent); /* → #495c65 over the band above; white on it 7.00:1 */

  /* product badges on an ATDW listing: a category pill, an accolade outline, a deal pill */
  --color-role-pill-category: var(--color-base-teal-60); /* ! theirs is #00a5a4, whose 12px white label is 3.04:1 — 4.73:1 */
  --color-role-pill-deal: var(--color-base-pink-70);     /* ! theirs is #f83458 at 3.73:1, large text only — 4.97:1 */
  --color-role-pill-label: var(--color-base-neutral-white);

  /* three control tiers: filled teal, filled pink CTA, teal outline */
  --color-role-control-fill: var(--color-base-teal-60);        /* ! theirs is #00a5a4, whose white label is 3.04:1; flip to teal-50 for literal parity */
  --color-role-control-fill-hover: var(--color-base-teal-90);  /* ! theirs is #00bfbd — 2.29:1 */
  --color-role-control-outline: var(--color-base-teal-50);     /* their surface teal on a 2px border: 3.04:1 clears the 3:1 non-text threshold */
  --color-role-control-outline-ink: var(--color-base-teal-60); /* ! #00a5a4 as label ink is 3.04:1 */
  --color-role-control-cta: var(--color-base-pink-60);
  --color-role-control-cta-hover: var(--color-base-pink-70);   /* ! theirs is #f94d6c — 3.33:1 */
  --color-role-control-label: var(--color-base-neutral-white);

  /* focus */
  --focus-role-ring-color: var(--color-base-teal-60); /* ! the reference ships no focus treatment (WCAG 2.4.7, 1.4.11) */
  --focus-role-ring-width: var(--border-width-base-2);
  --focus-role-ring-offset: var(--space-base-4);

  /* ─── role: typography ─── size and leading only; the display ramp is flat at every width ─── */
  --font-role-display-1-size: var(--font-size-base-56); /* h1 */
  --font-role-display-2-size: var(--font-size-base-48); /* h2 */
  --font-role-display-3-size: var(--font-size-base-40); /* h3 */
  --font-role-title-1-size: var(--font-size-base-32);   /* h4 — interpolated: h4–h6 are not on the reference page */
  --font-role-title-2-size: var(--font-size-base-26);   /* h5 */
  --font-role-title-3-size: var(--font-size-base-22);   /* h6 */
  --font-role-display-leading: var(--line-height-base-flat);

  /* body and meta */
  --font-role-body-size: var(--font-size-base-16); /* paragraph copy; steps once, at 600px */
  --font-role-body-leading: var(--line-height-base-normal);
  --font-role-body-sm-size: var(--font-size-base-16);     /* flat: footer links, nav bar, code */
  --font-role-meta-size: var(--font-size-base-14);        /* byline meta, captions, breadcrumbs */
  --font-role-micro-size: var(--font-size-base-12);       /* footer muted labels, copyright */
  --font-role-nano-size: var(--font-size-base-10);        /* the acknowledgement of Country */
  --font-role-control-size: var(--font-size-base-16);     /* the small button tier */
  --font-role-control-lg-size: var(--font-size-base-20);  /* the primary CTA tier */

  /* ─── role: layout ─── measured one-off geometry, so these carry the literal ─── */
  --size-role-content-width: 1170px; /* the text measure, not the outer container — gutters sit outside it */
  --size-role-title-measure: 780px;  /* the reference caps its page title here */
  --size-role-nav-height: 91px;      /* a 90px bar plus its 1px hairline */

  /* rhythm */
  --space-role-gutter: var(--space-base-20); /* tightens to 15px above 1200px, which yields the measured 1170px column */
  --space-role-para: var(--space-base-16);
  --space-role-block-gap: var(--space-base-40); /* between sections, and between wrappers within one */
  --space-role-heading-above: var(--space-base-40);
  --space-role-heading-below: var(--space-base-20);
  --space-role-heading-above-tight: var(--space-base-30); /* the two smallest steps sit closer to the copy they introduce */
  --space-role-heading-below-tight: var(--space-base-10);

  /* radii */
  --radius-role-media: var(--radius-base-0);   /* every piece of media on the reference page is square-cornered */
  --radius-role-control: var(--radius-base-8); /* buttons are the only rounded thing in the content */
}

/* Rebound by BARE NAME, so no block stylesheet carries a media query for type or spacing. */
@media (width >= 600px) {
  :root {
    --font-role-body-size: var(--font-size-base-18);
    --space-role-para: var(--space-base-18);
  }
}

/* The gutter tightens rather than opening out: 1200px less 2x15 is the measured 1170px column. */
@media (width >= 1200px) {
  :root {
    --space-role-gutter: var(--space-base-15);
  }
}