/* ============================================================
   kristapatrick.com - design tokens
   Palette A "Ledger" (dark warm ground) with Palette B "Press"
   as inverted reading sections.
   Spec: Desktop/Krista AI Content/KP Consulting/BRAND_ARCHITECTURE_AND_SITE_STRATEGY_2026-09-04.md

   MIGRATION LADDER - the site ships at Stage 3.
   Social/reel assets move independently; never re-render the back catalogue.
     Stage 0 (old)  ink #2B2927  signal #6E8E9E  ground #F5F0EB   <- fails AA at 3.08:1
     Stage 1        ink #262220  signal #3F6070  ground #F4EFE6
     Stage 2        + brass #C6A768 as a second accent, both present ~6 weeks
     Stage 3 (here) ground #211A13  signal gold foil  Still Blue retired to Anchor Moments
   ============================================================ */

:root{
  /* ---- Ledger: the dark ground ---- */
  --ground:      #211A13;   /* page - warm dark BROWN, hue 30d sat 42% */
  --surface:     #2C241B;   /* raised panels, cards                  */
  --surface-2:   #372D22;   /* nested / hover                        */
  --sunk:        #1A140E;   /* footer, wells                         */
  --rule:        #40352A;   /* borders                               */
  --rule-soft:   #332920;   /* internal dividers                     */

  --ink:         #EDE6D6;   /* 13.91:1 on ground                     */
  --ink-soft:    #B8AE9C;   /*  7.88:1 on ground                     */
  --ink-faint:   #9E9484;   /*  5.78:1 on ground / 5.07:1 on surface */

  /* Gold, matched to her jewellery: warm gold, never silver.
     Foil is a GRADIENT, so it is only as accessible as its darkest stop.
       --foil       every stop >= 5.40:1 on surface. Safe at any size.
       --foil-rich  darkest stop 3.46:1. LARGE TEXT ONLY (>=24px, or 18.66px bold)
                    and non-text decoration. Never body copy.
     --signal is the flat fallback for borders, focus rings and SVG strokes,
     because a gradient cannot be an outline colour. */
  --signal:      #D4B571;   /* flat gold - 8.71:1 on ground           */
  --signal-deep: #B8945A;   /* pressed   - 6.07:1 on ground           */
  --support:     #CDBFA6;   /* bone   - warm neutral, rare use       */

  --foil: linear-gradient(105deg,
          #B8945A 0%, #DCC084 20%, #F7EDD2 36%, #DCC084 50%,
          #B8945A 66%, #E8D2A2 84%, #B8945A 100%);
  --foil-rich: linear-gradient(105deg,
          #8A6B2E 0%, #C9A961 22%, #F2E2B4 38%, #C9A961 54%,
          #8A6B2E 70%, #DCC084 88%, #8A6B2E 100%);
  --marker:      #D08857;   /* finding marker only, never a button   */

  /* ---- Press: inverted reading sections ---- */
  --paper:       #F7F3EA;
  --paper-raised:#FDFBF6;
  --paper-rule:  #E3DBCB;
  --paper-ink:   #211E1A;   /* 14.99:1 on paper                      */
  --paper-soft:  #5E574C;   /*  6.44:1 on paper                      */
  --paper-faint: #7C7466;   /*  4.6:1  - never below this on paper   */
  --paper-signal:#6B5220;   /*  6.65:1 on paper - deep gold.         */
                            /*  Foil reads as foil only on a dark ground, */
                            /*  so paper sections use flat deep gold.     */
  --paper-marker:#7A3B21;   /*  7.66:1 on paper                      */

  /* ---- type ---- */
  --display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Display face is ONE weight and is display-only.
     Never below 28px. Never for body, nav, buttons, labels or tables. */
  --t-hero:  clamp(46px, 7.4vw, 92px);
  --t-d1:    clamp(38px, 5.4vw, 66px);
  --t-d2:    clamp(30px, 3.6vw, 46px);
  --t-d3:    clamp(28px, 2.6vw, 34px);
  --t-lede:  clamp(19px, 1.6vw, 22px);
  --t-body:  18px;
  --t-small: 15px;
  --t-micro: 13px;
  --t-eyebrow: 11.5px;

  --lh-display: 1.04;
  --lh-body: 1.68;
  --measure: 66ch;

  /* ---- space: 4/8 rhythm ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --page-x: clamp(20px, 5vw, 64px);
  --shell: 1200px;

  /* ---- motion: one shared set, nothing bounces ---- */
  --e-out: cubic-bezier(.2,.7,.3,1);
  --e-in:  cubic-bezier(.5,0,.75,.3);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 460ms;

  --z-rail: 40;
  --z-nav: 60;
  --z-skip: 100;
}

/* Press sections invert the token set so components never need to know
   which ground they are sitting on. */
.on-paper{
  --ground: var(--paper);
  --surface: var(--paper-raised);
  --surface-2: #F1EADC;
  --rule: var(--paper-rule);
  --rule-soft: #EDE6D7;
  --ink: var(--paper-ink);
  --ink-soft: var(--paper-soft);
  --ink-faint: var(--paper-faint);
  --signal: var(--paper-signal);
  --signal-deep: #4E3B17;
  --foil: none; --foil-rich: none;
  --marker: var(--paper-marker);
  --support: #5A6247;
}