/*
 * v4 design tokens: the tool shop's system (alientechtools.co.uk) in our colours. The only v4 file that may hold a
 * colour (tests/test-v3-no-slop.php); tests/test-v4-tokens.php checks every text colour on every ground of both bands.
 *
 * Three layers. Primitives: the shop's charcoal and paper, our orange as the one accent. Semantic: what a component
 * reads (--bg, --fg, --accent-ink...), light by default and re-scoped by a band. Component: the button, the cards.
 * A page alternates dark bands ("pedestal": the product on show) and light ones ("datasheet": the facts).
 */

:root {
  /* -- primitive ------------------------------------------------------------ */
  --p-char-950: #0e0e10;
  --p-char-900: #18181b;
  --p-char-850: #1f1f23;
  --p-char-800: #26262b;
  --p-char-700: #3c3c42;
  --p-paper: #f6f5f0;
  --p-paper-2: #ecebe3;
  --p-white: #ffffff;
  --p-ink: #1a1a1c;
  --p-ink-2: #45454b;
  --p-fog: #b4b4ba;
  --p-snow: #f4f4f0;

  --p-orange: #e8702a;      /* the button, the stripes: a surface on either band */
  --p-orange-hi: #f59a5c;   /* orange as type on charcoal */
  --p-orange-deep: #a2420b; /* orange as type on paper */
  --p-orange-ink: #1a0f06;  /* type on an orange surface */
  --p-orange-wash: #fbe7da; /* a picked option on paper */

  --p-ok: #3ec46d;
  --p-bad: #c62828;

  --font-sans: "Archivo", "Archivo fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: "Archivo", "Archivo fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Space: a 4 px base, the names v3 parts already use. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --wrap: 1240px;
  --header-h: 72px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;

  /* Decoration, here because a gradient is a colour: the dark band's slight fall, the index and edge stripes, the
     shade under a product shown without a frame. */
  --band-dark-fill: linear-gradient(180deg, #16161a, #1c1c20);
  --stripes: repeating-linear-gradient(-45deg, #e8702a 0 6px, #18181b 6px 12px);
  --stripes-edge: repeating-linear-gradient(-45deg, #e8702a 0 10px, #0e0e10 10px 20px);
  --grid-fill: linear-gradient(rgba(26, 26, 28, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 26, 28, .045) 1px, transparent 1px);
  --shadow-product: 0 40px 80px -30px rgba(0, 0, 0, .7);
  --shadow-card: 0 1px 0 rgba(26, 26, 28, .06), 0 18px 40px -28px rgba(26, 26, 28, .35);
  --glow-pick: 0 0 0 1px #e8702a, 0 24px 48px -28px rgba(232, 112, 42, .55);
  --scrim: rgba(14, 14, 16, .6);

  /* -- semantic: light ("datasheet") by default, re-scoped by a band ------- */
  --bg: var(--p-paper);
  --surface: var(--p-white);
  --fg: var(--p-ink);
  --muted: var(--p-ink-2);
  --line: rgba(26, 26, 28, .13);
  --line-strong: rgba(26, 26, 28, .45);
  --accent-ink: var(--p-orange-deep);
  --tick: var(--p-orange-deep);
  --focus: var(--p-orange-deep);
  --pick: var(--p-orange-wash);
  --grid: rgba(26, 26, 28, .045);

  /* -- component ------------------------------------------------------------- */
  --btn-bg: var(--p-orange);
  --btn-ink: var(--p-orange-ink);
  --btn-ghost-line: var(--line-strong);
  --bar-bg: var(--p-char-950);
  --bar-fg: var(--p-snow);
  --bar-muted: var(--p-fog);
  --bar-line: rgba(255, 255, 255, .1);
  --panel-bg: var(--p-char-900);

  /* -- v3's names for the same roles ---------------------------------------- */
  /* A plugin or a part drawn for v3 (the file search, InstaTuner, the read check) reads these: light here, re-scoped
     on a dark band below (tests/test-v4-tokens.php). */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.24rem + 0.5vw, 1.6rem);
  --step-3: clamp(1.6rem, 1.4rem + 0.95vw, 2.15rem);
  --step-4: clamp(2rem, 1.65rem + 1.6vw, 2.9rem);
  --step-5: clamp(2.4rem, 1.85rem + 2.5vw, 3.9rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-1: 4px;
  --radius-2: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-3: 600ms;
  --shadow-float: 0 12px 32px -12px rgba(14, 14, 16, .45);
  --header-bg: var(--p-char-950);
  --bg-sunk: var(--p-paper-2);
  --bg-raised: var(--p-white);
  --bg-hover: var(--p-paper-2);
  --ink: var(--p-ink);
  --ink-2: var(--p-ink-2);
  --ink-3: #5d5d63;
  --accent: var(--p-orange);
  --on-accent: var(--p-orange-ink);
  --link: var(--p-orange-deep);
  --ok: #1d7a3e;
  --warn: #8a5a00;
  --bad: var(--p-bad);
  --field-bg: var(--p-white);
  --field-line: rgba(26, 26, 28, .45);
  /* v3's own primitives and parts, as v4 draws them. */
  --measure: 66ch;
  --page-max: 1240px;
  --paper-0: #ffffff;
  --coal-1: #1a1a1c;
  --coal-3: #5d5d63;
  --night-1: #0e0e10;
  --night-line: #26262b;
  --snow-1: #f4f4f0;
  --snow-2: #c8c8ce;
  --snow-3: #9a9aa4;
  --signal-1: #f59a5c;
  --signal-4: #a2420b;
  --plate-dark: #0e0e10;
  --plate-light: #ffffff;
  --bezel: #0e0e10;
  --device-base: #3c3c42;
  --map-land: #e3e1d8;
  --map-pin: #ff3b30;
  --hero-map-fade: radial-gradient(ellipse 34% 40% at 50% 46%, rgb(0 0 0 / 0.18) 0, rgb(0 0 0 / 0.18) 50%, rgb(0 0 0) 100%);
  --code-bg: var(--p-paper-2);
  --btn-2-line: rgba(26, 26, 28, .45);
  --btn-plate: none;
  --btn-plate-hover: none;
  --btn-edge: none;
  --headline-sheen: none;
  --header-rule: none;
}

.band--light {
  --bg: var(--p-paper);
  --surface: var(--p-white);
  --fg: var(--p-ink);
  --muted: var(--p-ink-2);
  --line: rgba(26, 26, 28, .13);
  --line-strong: rgba(26, 26, 28, .45);
  --accent-ink: var(--p-orange-deep);
  --tick: var(--p-orange-deep);
  --focus: var(--p-orange-deep);
  --pick: var(--p-orange-wash);
  --btn-bg: var(--p-orange);
  --btn-ink: var(--p-orange-ink);
  --btn-ghost-line: var(--line-strong);
}

/* The bar, the strip, the footer and the cookie card are always charcoal. */
.v3-strip,
.v3-header,
.v3-footer,
.v3-consent,
.phonebar {
  --fg: var(--p-snow);
  --muted: var(--p-fog);
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .4);
  --accent-ink: var(--p-orange-hi);
  --focus: var(--p-orange-hi);
  --btn-ghost-line: rgba(255, 255, 255, .4);
  /* v3's names, for a v3 page's footer rules (tests/test-v4-tokens.php). */
  --bg-sunk: var(--p-char-950);
  --bg-raised: var(--p-char-850);
  --bg-hover: var(--p-char-800);
  --ink: var(--p-snow);
  --ink-2: var(--p-fog);
  --ink-3: #9a9aa4;
  --link: var(--p-orange-hi);
  --ok: #6fcf8e;
  --warn: #f2c14e;
  --bad: #ff8a7a;
  --field-bg: var(--p-char-950);
  --field-line: rgba(255, 255, 255, .4);
  --code-bg: var(--p-char-950);
  --btn-2-line: rgba(255, 255, 255, .4);
}

/* v3's dark grounds are dark bands in v4: a sunk band, the deep scene and a page's head. */
.band--dark,
.band--sunk,
.v3-deep,
.page-head {
  --bg: var(--p-char-900);
  --surface: var(--p-char-850);
  --fg: var(--p-snow);
  --muted: var(--p-fog);
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .4);
  --accent-ink: var(--p-orange-hi);
  --tick: var(--p-orange-hi);
  --focus: var(--p-orange-hi);
  --pick: var(--p-char-800);
  --btn-bg: var(--p-orange);
  --btn-ink: var(--p-orange-ink);
  --btn-ghost-line: var(--line-strong);
  --grid: rgba(255, 255, 255, .035);
  --bg-sunk: var(--p-char-950);
  --bg-raised: var(--p-char-850);
  --bg-hover: var(--p-char-800);
  --ink: var(--p-snow);
  --ink-2: var(--p-fog);
  --ink-3: #9a9aa4;
  --link: var(--p-orange-hi);
  --ok: #6fcf8e;
  --warn: #f2c14e;
  --bad: #ff8a7a;
  --field-bg: var(--p-char-950);
  --field-line: rgba(255, 255, 255, .4);
  --map-land: #2a2a30;
  --code-bg: var(--p-char-950);
  --btn-2-line: rgba(255, 255, 255, .4);
}