/* ============================================================
   THREDLY — design tokens  ·  THE single source of truth
   Load order on every page (see _page-scaffold.html):
     tokens.css  →  theme-dark.css  →  brand.css
     · tokens.css     — canonical palette, type, geometry, elevation (light mode)
     · theme-dark.css — dark-mode overrides (html[data-theme="dark"])
     · brand.css      — component-level brand treatments only (no tokens)
   Change a colour HERE, never in a page's inline <style>.
   Contrast notes: --text / --muted / --faint are AA-verified on
   --paper AND --surface (muted 5.31:1, faint 4.64:1 on parchment).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=IBM+Plex+Mono:wght@400;500;600&display=block');

:root {
  /* ---- Type ---- */
  --ui:      'DM Sans', system-ui, -apple-system, sans-serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-italic: normal;

  /* ---- Thread orange — brand action (mapped onto plum/accent) ---- */
  --plum:        #D4601A;
  --plum-deep:   #B34E14;
  --plum-soft:   #F8E8DA;
  --plum-line:   #ECD8C7;
  --accent:      #D4601A;
  --accent-deep: #B34E14;
  --accent-soft: #F8E8DA;
  --accent-line: #ECD8C7;

  /* ---- Forest — resolved / confirmed (mapped onto sage) ---- */
  --sage:      #2D5A3D;
  --sage-bg:   #E1EAE2;
  --sage-text: #2D5A3D;

  /* ---- Warning gold (mapped onto amber) ---- */
  --amber:      #C99B5E;
  --amber-bg:   #F4E9D4;
  --amber-text: #8A6A2E;

  /* ---- Error red — failures, destructive states ---- */
  --error:      #B6585A;
  --error-bg:   #F6E7E5;
  --error-text: #8B3A3A;

  /* ---- Warm neutrals ---- */
  --ink:       #1A1612;
  --ink-2:     #2A2118;
  --text:      #2A2118;
  --muted:     #6E614F;
  --faint:     #776A5A;
  --paper:     #FFFFFF;   /* cards / main content area */
  --surface:   #F5F0E8;   /* parchment — the page */
  --surface-2: #EDE8DE;   /* cream — section breaks, fills */
  --pill:      #EDE8DE;
  --border:    #E6DCCB;
  --border-2:  #D9CDB8;

  /* ---- Dark / hero sections (warm ink) ---- */
  --hero-from: #241B12;
  --hero-to:   #140F0A;
  --hero-glow: rgba(212, 96, 26, 0.40);

  /* ---- Geometry & rhythm ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --gap: 20px;
  --card-pad: 20px;

  /* ---- Warm-toned elevation ---- */
  --shadow-sm: 0 1px 2px rgba(26,18,8,0.05), 0 1px 3px rgba(26,18,8,0.05);
  --shadow-md: 0 4px 14px rgba(26,18,8,0.07), 0 1px 3px rgba(26,18,8,0.05);
  --shadow-lg: 0 18px 48px rgba(26,18,8,0.16);
}

::selection { background: var(--plum-soft); }