/* ═══════════════════════════════════════════════
   CuttingTies.ai — Design tokens (public site)
   Expert-publication aesthetic: light reading
   surface, navy structure, gold used sparingly.
   Brand colors shared with design-system.css
   (chat app); this file is the source of truth
   for the public site only.
   ═══════════════════════════════════════════════ */

:root {
  /* ── Reading surface ── */
  --paper: #FCFBF8;            /* page background — natural white */
  --paper-raised: #FFFFFF;     /* cards, boxes */
  --paper-tint: #F6F4EF;       /* alternating sections, table stripes */

  /* ── Ink (body text on paper) ── */
  --ink: #1F2933;              /* body text — near-black, slightly warm */
  --ink-muted: #52606D;        /* secondary text, captions */
  --ink-light: #7B8794;        /* metadata, fine print */

  /* ── Navy — headings, navigation, structure ── */
  --navy: #0F2440;
  --navy-900: #1E3A5F;
  --navy-700: #486B8F;
  --navy-100: #C8D6E5;
  --navy-50: #F0F4F8;
  --on-navy: #FFFFFF;          /* text on navy backgrounds (hero) */
  --on-navy-muted: #94B0CC;

  /* ── Gold — SPARINGLY: links, rules, quote accents ── */
  --gold: #B8963E;
  --gold-dark: #8A7030;        /* text-safe gold (links): AA on paper */
  --gold-light: #D4BA6A;
  --gold-wash: #F5F0E3;

  /* ── Traffic lights — clearly distinct from gold ── */
  /* gold is muted/olive; yellow signal is bright amber */
  --signal-red: #C62828;
  --signal-red-text: #8E1318;
  --signal-red-bg: #FBEFEF;
  --signal-yellow: #F9A825;
  --signal-yellow-text: #7A5C00;
  --signal-yellow-bg: #FFF8E1;
  --signal-green: #2E7D32;
  --signal-green-text: #1B5E20;
  --signal-green-bg: #EFF6EF;

  /* ── Borders ── */
  --border: #DAD5CB;
  --border-light: #E8E4DB;
  --rule-gold: 2px solid var(--gold);   /* decorative divider line */

  /* ── Typography ── */
  /* Max 2 families. Source Serif 4: sturdier than Cormorant
     at small sizes. Loaded per page with display=swap. */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-sm: 0.875rem;                          /* 14px — metadata */
  --text-base: 1.0625rem;                       /* 17px mobile body */
  --text-lg: 1.1875rem;                         /* 19px — lead paragraph */
  --text-h3: clamp(1.25rem, 2.5vw, 1.375rem);   /* 20–22px */
  --text-h2: clamp(1.5rem, 3.5vw, 1.75rem);     /* 24–28px */
  --text-h1: clamp(1.875rem, 5vw, 2.5rem);      /* 30–40px */
  --text-display: clamp(2rem, 6vw, 3rem);       /* hero only */

  --leading-body: 1.65;
  --leading-heading: 1.25;
  --measure: 68ch;             /* ~70 characters max line length */

  /* ── Spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── Misc ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 3px rgba(15, 36, 64, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 36, 64, 0.08);
  --transition: 0.15s ease;
  --content-max: 1080px;       /* page shell */
}

/* Body text 18px from tablet up */
@media (min-width: 600px) {
  :root {
    --text-base: 1.125rem;     /* 18px */
    --text-lg: 1.25rem;        /* 20px */
  }
}