/* ============================================================
   PiHue Creations — Design Tokens (v3.1, canonical)
   Palette: cool bone base, near-black ink, THREE distinct accents:
     --brass       #A8802C  hairlines/borders/hover bars/large headings (AA-large only on light)
     --brass-deep  #8A6A20  ALL small text: eyebrows, spec chips, captions (4.59:1 on base)
     --madder      #A03A28  link hover, active nav rule, ONE emphasis/page (6.10:1 on base)
   NOT interchangeable. See DESIGN-DIRECTION-v3.md §"Three accents" for the split.
   Two families only: Newsreader (display) + Instrument Sans (body & chips).
   ============================================================ */

@font-face { font-family:'Newsreader'; src:url('../fonts/newsreader-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; size-adjust:100%; }
@font-face { font-family:'Newsreader'; src:url('../fonts/newsreader-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; size-adjust:100%; }
@font-face { font-family:'Newsreader'; src:url('../fonts/newsreader-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; size-adjust:100%; }
@font-face { font-family:'Instrument Sans'; src:url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; size-adjust:100%; }
@font-face { font-family:'Instrument Sans'; src:url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; size-adjust:100%; }
@font-face { font-family:'Instrument Sans'; src:url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; size-adjust:100%; }

:root{
  /* Color — v3 palette; token names identical to v1/v2, values replaced */
  --greige:      #F5F4F1;  /* cool bone — page base (NOT warm ivory) */
  --paper:       #FFFFFF;  /* raised surfaces (cards, modals) */
  --indigo:      #1C1C1A;  /* near-black — ink, structure (15.5:1 on base) */
  --indigo-deep: #0F0F0E;  /* deep dark — footer, buyer band */
  --brass:       #A8802C;  /* hairlines/hover/borders/large-heading only  (3.30:1 AA-large only on base) */
  --brass-deep:  #8A6A20;  /* ALL small text: eyebrows, spec chips, small caps, captions (4.59:1 AA-normal on base) */
  --madder:      #A03A28;  /* second accent — link hover, active nav rule, one emphasis/page (6.10:1 on base) */
  --walnut:      #5C5A54;  /* muted text, captions (6.3:1 on base) */
  --thread:      rgba(28,28,26,.22);   /* hairlines — v3.1 raised from .14 (was too faint on cool bone base) */
  --thread-soft: rgba(28,28,26,.10);   /* grid motif lines — v3.1 raised from .06 */

  /* Type — two families + system-mono for numbers/IDs (added 2026-08-14 for /press/) */
  --f-display:'Newsreader', Georgia, serif;
  --f-body:'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-spec:'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale — v3.2 floors enforced (2026-07-27):
     body copy  >= 16px, prefer 18px at 1024+
     small text >= 14px absolute
     captions   >= 14px
     spec chips >= 14px
     eyebrow    >= 13px
     Nothing renders below 13px on any element in body content. */
  --t-hero:   clamp(2.4rem, 5.2vw, 4.2rem);
  --t-h2:     clamp(1.7rem, 3vw, 2.4rem);
  --t-h3:     1.25rem;
  --t-body:   clamp(1rem, 0.75rem + 0.4vw, 1.125rem);   /* 16px → 18px at 1024+ */
  --t-small:  .875rem;   /* 14px absolute min */
  --t-spec:   .875rem;   /* was .72rem (11.5px). Raised to 14px per chip floor. */
  --t-eyebrow: .8125rem; /* 13px min for eyebrow labels */
  --t-caption:.875rem;   /* 14px caption floor */

  /* Rhythm */
  --space-1:.5rem; --space-2:1rem; --space-3:1.75rem;
  --space-4:3rem;  --space-5:5rem; --space-6:7.5rem;
  --measure:68ch;
  --wrap:1440px;
  --gutter:clamp(1.25rem, 4vw, 3rem);

  /* Signature: warp-and-weft grid (rug CAD graph paper) */
  --grid-cell:28px;
}

/* Grid motif — apply via .warp-grid, never as decoration elsewhere */
.warp-grid{
  background-image:
    repeating-linear-gradient(0deg,   var(--thread-soft) 0 1px, transparent 1px var(--grid-cell)),
    repeating-linear-gradient(90deg,  var(--thread-soft) 0 1px, transparent 1px var(--grid-cell));
}