/**
 * design-tokens.css: every hardcoded value this site is allowed to have, named once.
 *
 * THE SOURCE IS THE DESIGN SYSTEM SKILL, `.claude/skills/actorly-design/tokens/*.css` (vendored from
 * https://github.com/oderajoseph95/actorly-design-system; see its VENDORED.md). Each skill token `--x` is
 * `--act-x` here with the value the skill gives it; the few older names in the first block are mapped
 * in scripts/design-skill-check.mjs, which fails when a value here disagrees with the skill (ACT-50).
 * Change a value in the design system repository first, copy it over, then here.
 *
 * scripts/design-token-check.mjs refuses a hardcoded hex/px/ms value anywhere else in public/css/*.css
 * that already has a name here: this file is the one place a literal is allowed to live.
 *
 * DO NOT port Outperch's design-tokens.css over this one (a different product's system).
 */

/* Archivo, self-hosted from the skill's fonts/ (SIL OFL: public/fonts/OFL-Archivo.txt). Same rule as the skill's tokens/fonts.css. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/Archivo-Variable-latin.woff2') format('woff2');
}

:root {
  /* ── Colour: the first block is the site's older names; the values that moved to the skill's are noted ── */
  --act-paper: #F2EFE9;         /* page background */
  --act-ink: #12100E;           /* body text, headings */
  --act-accent-rust: #A32C00;   /* links, eyebrow labels — the everyday accent */
  --act-accent-ember: #FF4A1A;  /* selection highlight, ticker pulse — the "hotter" accent, sparing use */
  --act-hairline: #DDD6CA;      /* borders, dividers; the skill's --line (was #CBC4B6) */
  --act-panel: #E7E2D8;         /* filled panel background, active nav pill */
  --act-panel-light: #EAE5DC;   /* secondary panel background */
  --act-muted: #6B645B;         /* secondary text; the skill's --muted (was #57514A, which the skill now names --body) */
  --act-faint: #6B645B;         /* tertiary text, eyebrow/meta labels */
  --act-quiet: #9A9287;         /* the quietest text tone */

  /* ── Type ─────────────────────────────────────────────────────────────────────────────────── */
  --act-font-display: 'Archivo', Helvetica, Arial, sans-serif;   /* the skill's --font-sans; headings are weight 700 at wdth 100 (was wdth 112, weight 800) */
  --act-font-mono: var(--act-font-display);                /* LEGACY NAME, was 'JetBrains Mono'. The design system has no monospace, so the wordmark, nav and footer now render in Archivo; retire the name with the page port */

  /* ── Space — a starter scale, minted as real values are needed rather than guessed wholesale.
     Follows Outperch's own documented practice: a one-off "optically align" nudge does NOT get a
     token; a value reused across two or more components does. ─────────────────────────────────── */
  --act-space-1: 4px;
  --act-space-2: 8px;
  --act-space-3: 14px;
  --act-space-4: 24px;
  --act-space-5: 40px;

  /* ── Motion ───────────────────────────────────────────────────────────────────────────────── */
  --act-motion-fast: 160ms;
}

/* ============================================================================================
   THE SKILL'S TOKENS (ACT-50, 2026-10-12; applied to the older names above on 2026-10-13).
   Source: .claude/skills/actorly-design/tokens/{colors,typography,layout,motion,fonts}.css, every custom
   property renamed with the --act- prefix and every var() reference renamed with it. The skill's --muted
   is the older --act-muted name above (the same colour, #6B645B); the colour --act-muted held before
   (#57514A) is the skill's --body.
   Retiring the older names and the monospace alias is page work: see docs/design-system/PORT-STEPS.md.
   ============================================================================================ */
:root {
  /* from tokens/colors.css */
  --act-white: #FFFFFF;
  --act-ember: #FF4A1A;
  --act-ember-text: #A32C00;
  --act-ember-hover-on-ink: #FF6A3D;
  --act-ember-tint: rgba(255,74,26,.14);
  --act-ember-wash: #FFF6F2;
  --act-ember-soft: #FFE6DC;
  --act-body: #57514A;
  --act-body-strong: #3A342E;
  --act-line: #DDD6CA;
  --act-line-soft: #EFEBE4;
  --act-outline: #CFC6B7;
  --act-table-head: #F7F4EE;
  --act-ink-line: #2F2A25;
  --act-ink-outline: #4A433C;
  --act-body-on-ink: #C9C1B5;
  --act-chip-on-ink: #2A2521;
  --act-confirmed-bg: #CDFEE1;
  --act-confirmed-fg: #0C5132;
  --act-likely-bg: #E0F0FF;
  --act-likely-fg: #00527C;
  --act-unknown-bg: #EBEBEB;
  --act-unknown-fg: #616161;
  --act-notyet-bg: #EBE6DD;
  --act-notyet-fg: #57514A;
  --act-notpossible-bg: #F7F4EE;
  --act-notpossible-fg: #8A847A;
  --act-was-bg: #FEE9E8;
  --act-was-fg: #8E1F0B;
  --act-now-bg: #CDFEE1;
  --act-now-fg: #0C5132;
  --act-admin-bar: #1A1A1A;
  --act-admin-search: #303030;
  --act-admin-ground: #F1F1F1;
  --act-admin-sidebar: #EBEBEB;
  --act-admin-ink: #303030;
  --act-admin-muted: #616161;
  --act-admin-line: #E3E3E3;
  --act-admin-head: #F7F7F7;
  --act-surface-page: var(--act-paper);
  --act-surface-panel: var(--act-white);
  --act-surface-inverse: var(--act-ink);
  --act-text-primary: var(--act-ink);
  --act-text-body: var(--act-body);
  --act-text-secondary: var(--act-faint);
  --act-text-on-inverse: var(--act-paper);
  --act-text-on-inverse-body: var(--act-body-on-ink);
  --act-accent: var(--act-ember);
  --act-accent-text: var(--act-ember-text);
  --act-border: var(--act-line);
  --act-border-soft: var(--act-line-soft);
  --act-border-inverse: var(--act-ink-line);
  --act-button-primary-bg: var(--act-ink);
  --act-button-primary-fg: var(--act-paper);
  --act-button-primary-hover-bg: var(--act-ember);
  --act-button-primary-hover-fg: var(--act-ink);
  --act-button-inverse-bg: var(--act-ember);
  --act-button-inverse-fg: var(--act-ink);
  /* from tokens/typography.css */
  --act-display-wdth: 'wdth' 100;
  --act-h1-home: clamp(34px, min(5.4vw, 10.5vh), 104px);
  --act-h1: clamp(44px, 6.6vw, 108px);
  --act-h2: clamp(40px, 6.2vw, 100px);
  --act-h2-pinned: clamp(34px, min(4.8vw, 8vh), 76px);
  --act-h2-docs: clamp(34px, 4vw, 60px);
  --act-stat: clamp(56px, 8vw, 140px);
  --act-card-title: 22px;
  --act-lede: clamp(17px, 1.4vw, 20px);
  --act-body-size: 16px;
  --act-body-long: 18px;
  --act-small: 14px;
  --act-micro: 13px;
  --act-track-h1: -0.058em;
  --act-track-h2: -0.055em;
  --act-track-card: -0.02em;
  --act-track-wordmark: -0.045em;
  --act-lh-display: .92;
  --act-lh-h2: .94;
  --act-lh-lede: 1.55;
  --act-lh-body: 1.6;
  --act-lh-long: 1.7;
  --act-weight-display: 700;
  --act-weight-wordmark: 650;
  --act-weight-strong: 600;
  --act-text-display: var(--act-h1);
  --act-text-heading: var(--act-h2);
  --act-text-lede: var(--act-lede);
  --act-text-body-size: var(--act-body-size);
  /* from tokens/fonts.css (Inter is used only inside Shopify admin mock-ups and is not self-hosted here) */
  --act-font-admin: Inter, -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* from tokens/layout.css */
  --act-content-max: 1240px;
  --act-demo-max: 1180px;
  --act-text-max: 860px;
  --act-faq-max: 820px;
  --act-nav-max: 1080px;
  --act-gutter: 24px;
  --act-section-pad-home: 160px;
  --act-section-pad: 140px;
  --act-head-pad-top: 180px;
  --act-gap-headline-lede: 24px;
  --act-gap-lede-content: 44px;
  --act-radius-pill: 999px;
  --act-radius-stage: 28px;
  --act-radius-card: 24px;
  --act-radius-tile: 20px;
  --act-radius-inner: 14px;
  --act-radius-stamp: 12px;
  --act-radius-admin: 12px;
  --act-ring: 0 0 0 1px var(--act-line);
  --act-ring-hover: 0 0 0 1.5px var(--act-ink);
  --act-ring-active: 0 0 0 1.5px var(--act-ember);
  --act-shadow-demo: 0 0 0 1px var(--act-line), 0 40px 80px -40px rgba(18,16,14,.3);
  --act-shadow-ink-panel: 0 60px 120px -40px rgba(0,0,0,.65);
  --act-shadow-stamp: 0 14px 30px -14px rgba(18,16,14,.5);
  --act-shadow-nav: 0 0 0 1px var(--act-line), 0 20px 40px -24px rgba(18,16,14,.25);
  --act-nav-glass: rgba(255,255,255,.88);
  --act-nav-blur: 14px;
  --act-nav-height: 58px;
  --act-nav-top: 14px;
  --act-bp-article: 960px;
  --act-bp-docs: 900px;
  --act-bp-nav: 820px;
  --act-bp-mobile: 760px;
  --act-bp-phone: 390px;
  /* from tokens/motion.css */
  --act-ease-settle: cubic-bezier(.16,1,.3,1);
  --act-ease-travel: cubic-bezier(.65,0,.35,1);
  --act-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --act-ease-gravity: cubic-bezier(.55,0,.85,.35);
  --act-ease-fast: ease;
  --act-dur-reveal: 1.15s;
  --act-dur-fade: .9s;
  --act-dur-panel: .9s;
  --act-dur-travel: .7s;
  --act-dur-spring: .6s;
  --act-dur-fast: .25s;
  --act-stagger-line: 90ms;
  --act-stagger-card: 80ms;
  --act-mask-pad: .22em;
}