/* Design tokens. Argos: ivory and ink with peacock teal and antique gold.
   styles.css reads these and sets no colours, fonts, radii or spacing of its own.
   To change the look, copy another file from /themes/ over this one. */
:root {
  /* Surfaces, light */
  --bg: #F6F3EC;
  --bg-alt: #FBF9F4;
  --surface: #FBF9F4;
  --border: #E2DCCD;

  /* Text, light surfaces */
  --text: #0E1B24;
  --text-soft: #25343E;
  --text-muted: #394852;
  --text-label: #46555F;

  /* Accent: fills on dark, text on light, text on fills */
  --accent: #38D4C2;
  --accent-text: #0B6B68;
  --on-accent: #04161A;

  /* Surfaces and text, dark */
  --dark-bg: #09171F;
  --dark-surface: #102530;
  --dark-text: #F4F1E8;
  --dark-text-muted: #B3C2C8;
  --dark-border: #284553;

  /* Status colours used by the example result card */
  --warn-bg: #FFF1D1;
  --warn-text: #7A5200;
  --warn-icon: #B07600;
  --warn-bar: #E0A21B;


  /* Brand details: gold rules, image veils, hero image */
  --gold: #C9A24B;
  --veil-strong: rgba(9, 23, 31, 0.94);
  --veil-soft: rgba(9, 23, 31, 0.5);
  --hero-image: url("/assets/hero-eyes.webp");
  --story-bg: var(--dark-bg);

  /* Buttons */
  --btn-primary-bg: var(--text);
  --btn-primary-text: var(--surface);
  --btn-secondary-text: var(--text);
  --btn-secondary-border: var(--text);
  --btn-accent-bg: var(--accent);
  --btn-accent-text: var(--on-accent);
  --btn-accent-outline: var(--accent);
  --btn-accent-outline-text: var(--dark-text);
  --btn-pad-y: 16px;
  --btn-pad-x: 28px;
  --btn-pad-y-lg: 18px;
  --btn-pad-x-lg: 32px;
  --btn-pad-y-sm: 11px;
  --btn-pad-x-sm: 20px;
  --input-pad-y: 18px;
  --input-pad-x: 20px;

  /* Font families */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Font sizes */
  --fs-xs: 12px;
  --fs-micro: 13px;
  --fs-sm: 14px;
  --fs-small: 15px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-dek: 19px;
  --fs-lead-xl: 20px;
  --fs-brand: 21px;
  --fs-card-title: 25px;
  --fs-example-name: 30px;
  --fs-price: 36px;
  --fs-h1: clamp(42px, 5.6vw, 80px);
  --fs-h1-guide: clamp(36px, 5vw, 58px);
  --fs-h2: clamp(34px, 4vw, 52px);
  --fs-h2-cta: clamp(36px, 4.6vw, 64px);
  --fs-h2-faq: clamp(30px, 3.4vw, 42px);
  --fs-h2-guide: clamp(26px, 3vw, 34px);

  /* Line height, tracking, weights */
  --lh-body: 1.55;
  --lh-note: 1.6;
  --lh-snug: 1.2;
  --lh-tight: 1.08;
  --lh-hero: 1.02;
  --ls-heading: -0.015em;
  --ls-hero: -0.02em;
  --ls-label: 0.1em;
  --ls-brand: 0.01em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-strong: 600;

  /* Spacing scale, named by pixel value */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-36: 36px;
  --sp-38: 38px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-48: 48px;
  --sp-52: 52px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-72: 72px;

  /* Page layout */
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(64px, 9vw, 116px);
  --hero-top: clamp(52px, 8vw, 108px);
  --hero-bottom: clamp(56px, 8vw, 104px);
  --final-top: clamp(64px, 9vw, 112px);
  --guide-top: clamp(48px, 7vw, 88px);
  --guide-head-bottom: clamp(36px, 5vw, 64px);
  --guide-body-bottom: clamp(56px, 8vw, 96px);
  --maxw: 1200px;
  --measure: 680px;
  --measure-wide: 820px;

  /* Component widths */
  --w-form: 580px;
  --w-input: 260px;
  --w-hero: 520px;
  --w-lede: 520px;
  --w-example-basis: 380px;
  --w-example: 480px;
  --w-copy: 380px;
  --w-copy-body: 440px;
  --w-card-basis: 400px;
  --w-card: 500px;
  --w-promise: 300px;
  --w-step: 220px;
  --w-section-title: 420px;
  --w-section-aside: 320px;
  --w-section-aside-max: 460px;
  --w-qa-title: 760px;
  --w-qa-intro: 600px;
  --w-qa-q: 240px;
  --w-qa-a: 320px;
  --w-faq-title: 300px;
  --w-faq-list: 520px;
  --w-footer: 360px;
  --w-footer-max: 540px;
  --w-footer-links: 220px;
  --icon-logo: 28px;
  --icon-phone: 16px;
  --bar-h: 6px;

  /* Shape and focus */
  --radius: 0px;
  --border-w: 1px;
  --focus-w: 2px;
  --focus-offset: 3px;
  --hover-opacity: 0.8;
}