/* ──────────────────────────────────────────────
   CC DESIGN TOKENS — locked 8 May 2026
   Single source of truth for all colour, typography,
   spacing, and motion values across the rebuild.
   Reference: /marketing/cc-brand-system-final.html
   ────────────────────────────────────────────── */

:root {
  /* ── PALETTE (5 colours + neutral foundation, locked) ───────────── */
  --cream: #FAEFE0;            /* feature/accent surface - hero, thinking adjacent, callouts. Used as a TEXTURE not a default page bg */
  --off-white: #FDF8EE;        /* default page background - warm off-white, breathing room between cream features without going cool/sterile */
  --burnt-orange: #BF5B21;     /* DOMINANT brand colour - logo, primary CTA, headlines, eyebrow labels, italic emphasis, inline links, top borders */
  --dark-red: #7B1D2E;         /* supporting accent - section dividers, pull-quote borders, hover-state on dark surfaces */
  --sage: #7A8870;             /* thinking surfaces - strategy, methodology, pull-out quotes */
  --dark-text: #2D1810;        /* body text, captions, footer base */
  --white: #FFFFFF;            /* cards, tiles, surfaces that need maximum lift over cream/off-white */
  --page-bg: var(--off-white); /* alias - default page background. Use cream for feature surfaces only */

  /* Hover / deeper variants (web-only, do not use in PDF) */
  --burnt-orange-hover: #9A4B16;
  --dark-red-hover: #611828;
  --sage-hover: #677560;

  /* Subtle dividers */
  --divider-light: #e8e0d8;
  --divider-on-cream: rgba(45, 24, 16, 0.12);
  --divider-on-dark: rgba(250, 239, 224, 0.15);

  /* Cover gradient (proposal/deck covers only) */
  --cover-gradient: linear-gradient(160deg, #7B1D2E 0%, #9a3325 40%, #BF5B21 100%);

  /* ── TYPOGRAPHY ────────────────────────────── */
  /* Bricolage Grotesque is the default everywhere; Newsreader is reserved for long-form essay body + headings only. */
  --font-sans: 'Bricolage Grotesque', Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-logo: 'Archivo', Helvetica, Arial, sans-serif;  /* Archivo 800 for COLLAB COLLECTIVE wordmark only - Option 7 spec */

  /* Type scale (rem-based for accessibility, anchored to 16px root) */
  --fs-xs:    0.6875rem;  /* 11px - eyebrow labels, captions, meta */
  --fs-sm:    0.8125rem;  /* 13px - small body, button text, footer links */
  --fs-base:  1rem;       /* 16px - body */
  --fs-md:    1.125rem;   /* 18px - lede paragraphs */
  --fs-lg:    1.375rem;   /* 22px - tagline italic */
  --fs-xl:    1.75rem;    /* 28px - h3 cards, journal tile titles, pull quote */
  --fs-2xl:   2.375rem;   /* 38px - h2 section headlines */
  --fs-3xl:   2.75rem;    /* 44px - h2 thinking surface */
  --fs-4xl:   3.5rem;     /* 56px - h1 inner pages */
  --fs-5xl:   4rem;       /* 64px - h1 type specimen */
  --fs-6xl:   4.875rem;   /* 78px - hero h1 */
  --fs-logo:  4rem;       /* 64px - logo wordmark COLLAB top line */

  /* Type weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Line heights */
  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-heading: 1.15;
  --lh-base: 1.6;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-display: -3px;     /* hero h1 */
  --ls-h1: -1.5px;        /* large display */
  --ls-h2: -0.7px;        /* section h2 */
  --ls-tight: -0.3px;     /* h3 cards */
  --ls-base: 0;           /* body */
  --ls-eyebrow: 2.5px;    /* uppercase eyebrow labels */
  --ls-button: 0.6px;     /* button text */

  /* ── SPACING SCALE ─────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.75rem;   /* 44px */
  --space-8: 3.75rem;   /* 60px */
  --space-9: 5rem;      /* 80px */
  --space-10: 6.25rem;  /* 100px */

  /* ── LAYOUT ────────────────────────────────── */
  --container-narrow: 720px;
  --container-base: 1100px;
  --container-wide: 1240px;

  /* Standard page padding (responsive via media queries) */
  --page-pad-x: 1.5rem;          /* mobile */
  --page-pad-x-md: 2.5rem;       /* tablet */
  --page-pad-x-lg: 3.75rem;      /* desktop */

  /* ── SHAPES ────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── ELEVATION (shadows) ───────────────────── */
  --shadow-sm: 0 4px 14px rgba(45, 24, 16, 0.06);
  --shadow-md: 0 4px 18px rgba(45, 24, 16, 0.08);
  --shadow-lg: 0 8px 28px rgba(45, 24, 16, 0.10);

  /* ── MOTION ────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;

  /* ── ACCENT BARS (used on thinking surfaces, footer, proposal cover) ── */
  --accent-bar: 6px solid var(--dark-red);
  --accent-bar-thick: 8px solid var(--dark-red);
}

/* Print overrides — PDF generation should ignore web hover states and use solid colours */
@media print {
  :root {
    --burnt-orange-hover: var(--burnt-orange);
    --dark-red-hover: var(--dark-red);
    --sage-hover: var(--sage);
  }
}