/* DarkTiger foundation layer v1, 2026-09-23.
   Every site loads this first. Nothing below it invents a value; components use these names only.
   The overflow block near the bottom is the rule that prevents text-bleed at the source. */

:root {
  /* type scale, fixed. Nothing outside it, ever. */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px;
  --t-24: 24px; --t-32: 32px; --t-48: 48px; --t-64: 64px;
  /* fluid display sizes: shrink instead of overflowing */
  --t-display-1: clamp(36px, 6vw, 64px);
  --t-display-2: clamp(28px, 4vw, 48px);
  --t-display-3: clamp(22px, 2.6vw, 32px);
  /* line heights */
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.6;
  /* letter spacing */
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em;

  /* spacing scale, 4px base. No arbitrary margins. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px; --s-10: 128px;

  /* radius scale */
  --r-0: 0; --r-1: 4px; --r-2: 8px; --r-3: 16px; --r-full: 999px;

  /* shadow scale, elevation only */
  --sh-sm: 0 1px 2px rgba(0,0,0,.06);
  --sh-md: 0 4px 12px rgba(0,0,0,.08);
  --sh-lg: 0 12px 32px rgba(0,0,0,.12);
  --sh-xl: 0 24px 64px rgba(0,0,0,.16);

  /* motion tokens */
  --d-instant: 0ms; --d-fast: 150ms; --d-base: 250ms;
  --d-slow: 400ms;  --d-slower: 600ms; --d-slowest: 1000ms;
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-in: cubic-bezier(.7,0,.84,0);
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
  --move-sm: 8px; --move-md: 16px; --move-lg: 32px;
  --stagger-tight: 50ms; --stagger: 100ms; --stagger-slow: 150ms;
  --perspective: 1000px;

  /* layout */
  --container: 1180px;
  --gutter: var(--s-4);
  --grid-gap: var(--s-5);

  /* colour roles. A site's accent.css overrides only these, never a component. */
  --paper: #ffffff;   --paper-2: #f4f5f7;
  --ink: #14161a;     --graphite: #3b4048;  --mute: #626a75;
  --line: rgba(20,22,26,.14); --line-strong: rgba(20,22,26,.38);
  --accent: #1861c9;  --accent-on-dark: #7fc0ff; --accent-ink: #ffffff;
  --plate: #14161a;   --plate-ink: #ffffff;
  --ok: #067647; --warn: #9a6700; --err: #b42318;
}

/* breakpoints, for reference in components: 360 480 768 1024 1280 1536 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* THE TEXT-BLEED RULE.
   Long words, long URLs, long business names and pasted client copy overflow their box
   unless both of these hold: text may break, and flex/grid children may shrink below
   their content width. Everything else in the library depends on this staying here. */
:where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, td, th, blockquote, figcaption, label, a, span, summary) {
  overflow-wrap: break-word;
  word-break: break-word;
}
:where(.flex, .grid, [class*="grid"], [class*="row"], [class*="col"]) > * { min-width: 0; }
:where(img, svg, video, canvas, iframe) { max-width: 100%; height: auto; display: block; }
:where(table) { max-width: 100%; }
:where(pre, code) { overflow-x: auto; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--paper); color: var(--ink);
  font: var(--t-16)/var(--lh-body) "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* one focus ring for the whole site */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1);
}

/* reduced motion, global and non-negotiable */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}

/* container */
.wrap { width: min(var(--container), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.wrap.narrow { width: min(760px, calc(100% - (var(--gutter) * 2))); }

/* skip link */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s-4); top: var(--s-4); z-index: 100; background: var(--plate); color: var(--plate-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-1); }