/*
  Sarah T. — CX Consulting
  Design tokens. Single source of truth for color, type, spacing, and
  motion. Component and page styles should reference these variables
  rather than hard-coding values.
*/

:root {
  /* ---------------------------------------------------------------
     Color
     Brand palette below. Usage is intentionally sparse: cream/stone/
     white carry almost the entire page, navy carries text and dark
     buttons, and coral/teal/peach show up only as small, deliberate
     accents (a CTA button, a tag, a single block) — never as full
     section washes or combined on one screen.
  --------------------------------------------------------------- */

  /* Brand primitives */
  --brand-navy: #303A44;
  --brand-navy-deep: #1F262C;
  --brand-coral: #F69F94;
  --brand-coral-deep: #EF8A7D;
  --brand-teal: #A6D7D8;
  --brand-teal-soft: #EAF4F4;
  --brand-peach: #F7B89F;
  --brand-cream: #FAF8F4;
  --brand-stone: #F1EFE8;
  --brand-white: #FFFFFF;

  /* Semantic tokens — components reference these, not the primitives */
  --color-ink: var(--brand-navy);        /* primary text, logo, headings */
  --color-ink-soft: #626971;             /* secondary text, muted copy (derived) — 5.2:1 on cream, passes WCAG AA */
  --color-ink-faint: #697078;            /* tertiary text, captions, "best for" lines (derived) — 4.7:1 on cream, passes WCAG AA */

  --color-bg: var(--brand-cream);        /* main page background */
  --color-bg-alt: var(--brand-stone);    /* secondary section background */
  --color-bg-inverse: var(--brand-navy); /* dark section background (footer, etc.) */
  --color-bg-inverse-deep: var(--brand-navy-deep);

  --color-border: #E7E3D9;               /* hairlines, dividers, input borders (derived) */
  --color-border-strong: #D6D0C1;

  --color-cta: var(--brand-coral);       /* primary CTA buttons, accent highlights */
  --color-cta-hover: var(--brand-coral-deep);
  --color-cta-text: var(--brand-navy);   /* dark text on light coral for contrast */

  --color-block: var(--brand-teal);      /* sparing block/section backgrounds */
  --color-block-tint: var(--brand-teal-soft);
  --color-support: var(--brand-peach);   /* supporting warm tone — use sparingly */

  --color-white: var(--brand-white);

  /* ---------------------------------------------------------------
     Typography
     Serif is reserved for the wordmark and major headings (H1, and
     H2 where a page needs a display moment). Everything else —
     nav, body copy, buttons, captions — stays on the sans stack.
  --------------------------------------------------------------- */
  --font-serif: 'Playfair Display', 'Canela', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Logo */
  --fs-logo-word: 1.625rem;     /* "Sarah T." */
  --tracking-logo-sub: 0.16em;  /* "CX CONSULTING" */
  --fs-logo-sub: 0.6875rem;

  /* Display / headings — serif only for h1 (and optional display h2) */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-h2-display: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);

  /* Everything below is sans-serif */
  --fs-h2: 1.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-nav: 0.9375rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-nav: 0.02em;
  --tracking-caption: 0.06em;

  /* ---------------------------------------------------------------
     Spacing
  --------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* ---------------------------------------------------------------
     Layout
  --------------------------------------------------------------- */
  --max-width: 1120px;
  --max-width-narrow: 760px;
  --radius-sm: 2px;
  --radius-md: 3px;

  /* ---------------------------------------------------------------
     Elevation — kept minimal, no drop-shadow-heavy UI
  --------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(47, 42, 30, 0.06);
  --shadow-md: 0 4px 16px rgba(47, 42, 30, 0.08);

  /* ---------------------------------------------------------------
     Motion — subtle only
  --------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
}