/* ===========================================================================
   Casey Margell — Design Tokens (LOCKED)
   The ONLY file allowed to contain raw hex values. Everything in style.css and
   the templates references these custom properties via var(). This keeps the
   CSS-guard test honest and the palette single-sourced.
   Source: DESIGN_SYSTEM.md + tokens.json (design handoff).
   =========================================================================== */

:root {
  /* --- Brand surfaces --- */
  --paper: #FCFBF9;          /* primary background */
  --paper-warm: #F4F1EA;     /* panels, callouts, inset cards */
  --section-warm: #F8F5EF;   /* alternating section background */
  --ink: #17150F;            /* primary text; dark blocks/bands */
  --ink-warm: #211C14;       /* emphasis text on light; dark-band accents / inputs */
  --tangerine: #F08000;      /* accent — blocks, rules, marks, underlines ONLY */
  --teal-600: #0d9488;       /* Cloud Carbon Advisor globe (environmental accent) */
  --gray: #6B6A63;           /* eyebrow labels, quiet UI text */

  /* --- Text --- */
  --text: #48433B;           /* body text */
  --text-soft: #57534B;      /* secondary body */
  --muted: #8A8473;          /* captions, meta */
  --faint: #A39D90;          /* placeholder labels, divider-adjacent meta */
  --nav-link: #3F3B33;       /* resting nav link ink */

  /* --- Dark-context text (on Ink bands/cards) --- */
  --on-dark-body: #CBC6BB;   /* body copy on Ink */
  --on-dark-muted: #A39D90;  /* eyebrow/meta on Ink */

  /* --- Banner gradient --- */
  --banner-from: #E0730A;
  --banner-to: #F7993A;
  --banner-gradient: linear-gradient(120deg, var(--banner-from), var(--banner-to));
  --banner-eyebrow: #FFE6CC; /* eyebrow on the banner */
  --banner-body: #FFF1E4;    /* body copy on the banner */
  --banner-btn-bg: rgba(255, 255, 255, .16);     /* translucent secondary button on banner */
  --banner-btn-border: rgba(255, 255, 255, .35); /* its hairline border */

  /* --- Borders & dividers --- */
  --border-card: #EEEAE3;    /* frame / card outline on paper */
  --border-warm: #EAE3D6;    /* cards on warm panels */
  --divider: #EFEAE1;        /* section dividers, inner rules */
  --row-divider: #E7E1D5;    /* list row separators */
  --outline: #D9D3C7;        /* secondary buttons, input borders */
  --dark-divider: #3A352C;   /* rules inside Ink bands */

  /* --- Placeholder / decorative fills --- */
  --stripe-placeholder: repeating-linear-gradient(135deg, #EFE7D9 0 10px, #F6EFE2 10px 20px);
  --blueprint-grid:
    repeating-linear-gradient(0deg, rgba(90, 38, 0, .12) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(90, 38, 0, .12) 0 1px, transparent 1px 38px);

  /* --- Type families --- */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, monospace;

  /* --- Type scale (size / line-height / tracking) --- */
  --fs-hero: clamp(34px, 8vw, 62px);
  --lh-hero: 1.02;
  --tr-hero: -0.025em;

  --fs-h2: clamp(30px, 5vw, 38px);
  --lh-h2: 1.05;
  --tr-h2: -0.02em;

  --fs-h3: clamp(24px, 3.5vw, 28px);
  --lh-h3: 1.1;
  --tr-h3: -0.02em;

  --fs-card: 21px;
  --tr-card: -0.01em;

  --fs-body-lg: 20px;
  --lh-body-lg: 1.5;

  --fs-body: 16px;
  --lh-body: 1.55;

  --fs-small: 14px;

  --fs-label: 12px;
  --tr-label: 0.14em;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 34px;
  --space-9: 40px;
  --space-10: 48px;
  --space-12: 56px;
  --space-14: 64px;
  --space-16: 72px;

  /* Named layout spacing (from DESIGN_SYSTEM "Spacing & shape") */
  --section-x: 72px;         /* horizontal section padding */
  --section-x-banner: 64px;  /* banner-hero horizontal padding */
  --section-y: 72px;         /* vertical section padding */
  --card-pad: 34px;
  --grid-gap: 20px;
  --measure: 72ch;           /* body block max measure */
  --measure-hero: 46ch;      /* hero paragraph max measure */

  /* --- Radii --- */
  --radius-frame: 16px;
  --radius-card: 14px;
  --radius-chip: 8px;
  --radius-button: 7px;
  --radius-note: 3px;

  /* --- Shadows --- */
  --shadow-frame: 0 4px 24px rgba(0, 0, 0, .08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-warm: 0 4px 18px rgba(220, 120, 0, .14);

  /* --- Emphasis --- */
  --underline-emphasis: 6px solid var(--tangerine);
}