/* Torque Stripe Co. design tokens, direction A "Shop Manual" (docs/01-brand.md).
   Mirrors tokens.json by hand: change both. Light is the default; add
   data-theme="dark" (or class .on-dark) to a section for the Charcoal ground.
   Contrast of every text pair: python3 assets/brand/contrast.py */
:root {
  /* primitives */
  --tsc-charcoal: #1E1F22;
  --tsc-orange: #F26B1D;
  --tsc-paper: #F4F1EA;
  --tsc-ink: #121314;
  --tsc-steel: #5F6368;
  --tsc-rust: #B84A0E;
  --tsc-bolt-grey: #9AA0A6;
  --tsc-white: #FFFFFF;
  --tsc-paper-rule: #D8D2C4;
  --tsc-charcoal-raised: #2A2B2F;
  --tsc-charcoal-rule: #3A3C41;

  /* semantic, light ground (Paper) */
  --color-bg: var(--tsc-paper);
  --color-surface: var(--tsc-white);
  --color-text: var(--tsc-ink);            /* 16.49 on Paper */
  --color-muted: var(--tsc-steel);         /* 5.36 on Paper */
  --color-accent: var(--tsc-orange);       /* fills, stripes, buttons; never text on Paper (2.70) */
  --color-accent-text: var(--tsc-rust);    /* links and orange-family text on Paper: 4.63 */
  --color-on-accent: var(--tsc-ink);       /* text on an Orange fill: 6.11 */
  --color-border: var(--tsc-paper-rule);   /* decorative rules only */
  --color-border-strong: var(--tsc-charcoal);
  --color-focus: var(--tsc-ink);

  /* type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --weight-display: 800;
  --weight-display-sub: 700;
  --weight-body: 400;
  --weight-body-strong: 600;

  --text-display: clamp(2.75rem, 6vw + 1rem, 5rem);
  --text-h2: clamp(2rem, 2.5vw + 1rem, 3rem);
  --text-h3: 1.5rem;
  --text-body-lg: 1.1875rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.8125rem;
  --tracking-label: 0.06em;

  /* space */
  --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;
  --gutter: 16px;
  --max-width: 1200px;

  /* shape */
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-tile: 12px;
  --border-rule: 1px; --border-heavy: 2px; --border-stripe: 6px;
}

@media (min-width: 768px) { :root { --gutter: 40px; } }

/* semantic, dark ground (Charcoal) */
[data-theme="dark"], .on-dark {
  --color-bg: var(--tsc-charcoal);
  --color-surface: var(--tsc-charcoal-raised);
  --color-text: var(--tsc-paper);          /* 14.61 on Charcoal, 12.54 on raised */
  --color-muted: var(--tsc-bolt-grey);     /* 6.24 on Charcoal, 5.36 on raised */
  --color-accent: var(--tsc-orange);
  --color-accent-text: var(--tsc-orange);  /* 5.41 on Charcoal, 4.64 on raised */
  --color-on-accent: var(--tsc-ink);
  --color-border: var(--tsc-charcoal-rule);
  --color-border-strong: var(--tsc-paper);
  --color-focus: var(--tsc-orange);
}