/* Paper & Pixel base tokens, shared by every page and every product.
   The five tokens a product may change live in themes.css.
   Contrast (WCAG 2.1): --ink-2 7.6:1, --ink-3 4.6:1 or better on every
   background, --orange-ink 5.0:1 on paper, --on-accent 4.5:1 or better on
   every --accent. */

:root {
  /* colour */
  --paper: #FAF8F3;          /* page */
  --white: #FFFFFF;          /* cards, alternate sections */
  --band: #F1EEE6;           /* warm band sections */
  --line: #E4E0D6;           /* hairlines */
  --line-strong: #C9C5BA;    /* inputs, FAQ rules */
  --ink: #14142B;            /* headings, body */
  --ink-2: #4B4E6D;          /* secondary text */
  --ink-3: #666880;          /* labels, 12px or larger */
  --navy: #2B368F;           /* links, dark band, focus ring */
  --orange: #FF7F00;         /* studio accent, never under white text */
  --orange-ink: #A95300;     /* orange used as text */
  --orange-wash: #FFF0E0;
  --orange-on-dark: #FF9933; /* numbers and links on dark bands */
  --status-live: #1E8E5A;
  --status-live-ink: #1A7A4D; /* the live green as text: 5.3:1 on white (dots keep --status-live) */
  --status-beta: #C77700;
  --status-dev: #6B6E87;
  --error: #A6362A;
  --tone-prepare: #2FAD8A;   /* For Business permissions: AI prepares */
  --tone-review: var(--orange); /* people review */
  --tone-approve: #D14B3D;   /* approval required */
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .82);
  --placeholder: #8A8CA3;
  --device: #1F2036;         /* phone and laptop frames */
  --device-base: #2B2C45;
  --device-edge: #3A3B52;

  /* theme defaults = studio (see themes.css) */
  --accent: var(--orange);
  --accent-ink: var(--orange-ink);
  --accent-wash: var(--orange-wash);
  --on-accent: var(--ink);
  --wordmark-font: 'Cormorant Garamond', Georgia, serif;

  /* type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-display-xl: clamp(44px, 6vw, 76px);  /* lh .98, ls -.02em, 600 */
  --fs-display-l: clamp(34px, 4vw, 52px);   /* lh 1.05, ls -.015em, 600 */
  --fs-display-m: clamp(28px, 3vw, 36px);   /* lh 1.1, 600 */
  --fs-title: 26px;                          /* lh 1.15, 600 */
  --fs-faq: 22px;                            /* lh 1.3, 600 */
  --fs-lead: clamp(17px, 1.4vw, 19px);       /* lh 1.6 */
  --fs-body: 16px;                           /* lh 1.65 */
  --fs-small: 14px;                          /* lh 1.55 */
  --fs-button: 15px;                         /* 600 */
  --fs-label: 12px;                          /* mono, ls .14em, uppercase */

  /* space */
  --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;
  --section: var(--s-9);     /* 56px under 680px */
  --section-s: 32px;         /* quick-facts strip; 24px under 680px */
  --hero-top: 72px;          /* 40px under 680px */
  --hero-top-s: 48px;        /* 32px under 680px */
  --content: 1200px;
  --reading: 720px;
  --gutter: 4vw;
  --card-pad: 28px;
  --grid-gap: 24px;

  /* shape */
  --r-button: 2px; --r-card: 4px; --r-mark: 6px; --r-mark-l: 8px;
  --r-pill: 999px; --r-phone: 36px;
  --shadow-phone: 0 20px 50px rgba(20, 20, 43, .18);
  --shadow-banner: 0 12px 40px rgba(20, 20, 43, .3);
  --shadow-cover: 0 8px 24px rgba(20, 20, 43, .15);
  --focus: 0 0 0 3px rgba(43, 54, 143, .18);  /* with border-color: var(--navy) */
  --focus-color: var(--navy);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms;
  --t-rule: 700ms;
}

@media (max-width: 680px) {
  :root { --section: 56px; --section-s: 24px; --hero-top: 40px; --hero-top-s: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-rule: 0ms; }
}