/* =========================================================================
   Branch and Root Consulting — Design Tokens (Editorial Redesign)
   Single source of truth for color, type, spacing, motion.
   ========================================================================= */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-variable.woff2') format('woff2-variations'),
       url('../fonts/fraunces-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-variable.woff2') format('woff2-variations'),
       url('../fonts/fraunces-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/source-sans-3-variable.woff2') format('woff2-variations'),
       url('../fonts/source-sans-3-variable.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  /* ---- Brand palette (locked) ---------------------------------------- */
  --forest:       #1B4332;
  --forest-deep:  #0F2A1E;
  --slate:        #4A5568;
  --slate-soft:   #6B7280;
  --cream:        #F7F5F0;
  --cream-soft:   #FBFAF5;
  --moss:         #2D6A4F;
  --moss-light:   #52946F;
  --bone:         #FFFFFF;
  --warm:         #B8704A;
  --error:        #9C5B36;        /* clears 4.5:1 on white and cream */

  /* ---- Editorial extensions (additions only) ------------------------- */
  --paper:        #EFEADB;   /* duskier cream for card surfaces on cream page */
  --paper-soft:   #F2EEE3;   /* even softer for nested surfaces */
  --ink-warm:     #1F1B16;   /* warm near-black for editorial body */
  --ink-soft:     #2F2A22;
  --line:         #D9D2C2;
  --line-soft:    #E5DFCE;
  --line-hair:    #C9C0AA;   /* hairline divider color */
  --rule:         #1B4332;   /* horizon mark dot color (light mode) */

  /* ---- Type families -------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale (editorial, generous) ------------------------------ */
  --fs-anno:    0.68rem;       /* marginal annotations / location stamps */
  --fs-eyebrow: 0.74rem;
  --fs-body:    1.0625rem;     /* 17px */
  --fs-lead:    1.32rem;
  --fs-large:   1.5rem;
  --fs-h4:      1.05rem;
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h1:      clamp(2rem, 1.5rem + 1.8vw, 3.75rem);
  --fs-hero:    clamp(2.25rem, 1.6rem + 2.2vw, 3.75rem);
  --fs-display: clamp(3rem, 1.5rem + 5vw, 6rem);  /* oversized numerals — decorative, ghosted */

  /* ---- Tracking ------------------------------------------------------- */
  --track-eyebrow: 0.22em;
  --track-tight:  -0.025em;
  --track-tighter: -0.035em;

  /* ---- Spacing (8pt scale) ------------------------------------------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;
  --s-9: 12rem;

  /* ---- Layout -------------------------------------------------------- */
  --max-w:        1240px;
  --max-w-wide:   1360px;
  --max-w-narrow: 720px;
  --max-w-reading: 62ch;
  --radius:       4px;
  --radius-lg:    10px;
  --nav-h:        96px;   /* sticky-header offset for in-page sticky/anchor targets */

  /* ---- Shadows (light, editorial — minimal) -------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 42, 30, 0.05);
  --shadow:    0 6px 24px rgba(15, 42, 30, 0.08), 0 2px 4px rgba(15, 42, 30, 0.04);
  --shadow-lg: 0 24px 60px rgba(15, 42, 30, 0.14), 0 8px 16px rgba(15, 42, 30, 0.06);

  /* ---- Depth (editorial elevation system) ---------------------------- */
  /* Soft, warm, layered. Two-light model — top key, ambient floor.       */
  --elev-1: 0 1px 0 rgba(255,255,255,0.6) inset,
            0 1px 2px rgba(15, 42, 30, 0.04),
            0 4px 14px -6px rgba(15, 42, 30, 0.10);
  --elev-2: 0 1px 0 rgba(255,255,255,0.7) inset,
            0 2px 6px rgba(15, 42, 30, 0.05),
            0 18px 40px -18px rgba(15, 42, 30, 0.18);
  --elev-3: 0 1px 0 rgba(255,255,255,0.8) inset,
            0 8px 22px rgba(15, 42, 30, 0.08),
            0 32px 70px -22px rgba(15, 42, 30, 0.22);
  --glow-moss: 0 10px 28px -10px rgba(45, 106, 79, 0.45);
  --glow-moss-strong: 0 14px 38px -10px rgba(45, 106, 79, 0.60);

  /* Surface gradients — for cards & badges */
  --surface-grad:  linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
  --surface-grad-2: linear-gradient(160deg, var(--paper-soft) 0%, var(--paper) 100%);

  /* SVG noise (cream-toned grain) — for warm tactile depth.
     Encoded fractal-noise PNG-like data URI from feTurbulence. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  260ms;
  --dur-slow: 520ms;

  /* ---- Semantic aliases (light mode defaults) ------------------------ */
  --heading:   var(--forest);
  --body-fg:   var(--ink-warm);
  --page-bg:   var(--cream);
  --surface:   var(--bone);
  --surface-2: var(--paper);
  --header-bg: rgba(247, 245, 240, 0.88);

  /* Fixed brand colors — do NOT flip in dark mode.
     Use these on elements that live on an always-forest section. */
  --cream-fixed:  #F7F5F0;
  --forest-fixed: #1B4332;
}

/* ===========================================================================
   Dark mode
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --cream:      #0F1B14;
    --cream-soft: #142319;
    --paper:      #182A20;
    --paper-soft: #142319;
    --bone:       #1A2D22;
    --ink-warm:   #ECE5D0;
    --ink-soft:   #CFC7AE;
    --line:       #2A4032;
    --line-soft:  #213429;
    --line-hair:  #355043;
    --slate:      #9BAEAA;
    --slate-soft: #7A8C84;
    --rule:       #52946F;
    --error:      #E2A07A;        /* clears 4.5:1 on dark surfaces */

    --heading:    #F1ECDB;
    --body-fg:    #ECE5D0;
    --page-bg:    #0F1B14;
    --surface:    #1A2D22;
    --surface-2:  #142319;
    --header-bg:  rgba(15, 27, 20, 0.82);

    /* Dark depth — cooler, deeper, with subtle moss inner-glow */
    --elev-1: 0 1px 0 rgba(82,148,111,0.10) inset,
              0 2px 6px rgba(0,0,0,0.35),
              0 6px 18px -8px rgba(0,0,0,0.45);
    --elev-2: 0 1px 0 rgba(82,148,111,0.12) inset,
              0 4px 14px rgba(0,0,0,0.40),
              0 22px 48px -22px rgba(0,0,0,0.60);
    --elev-3: 0 1px 0 rgba(82,148,111,0.14) inset,
              0 10px 28px rgba(0,0,0,0.45),
              0 36px 80px -22px rgba(0,0,0,0.70);
    --glow-moss: 0 12px 32px -10px rgba(82, 148, 111, 0.45);
    --glow-moss-strong: 0 18px 44px -10px rgba(82, 148, 111, 0.65);

    --surface-grad:   linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    --surface-grad-2: linear-gradient(160deg, var(--surface-2) 0%, #102017 100%);
  }
}