/* ============================================================
   barrybaldwin.co — design tokens
   Editorial/craft system. Ink cover, paper interiors.
   Burnt sienna accent on paper, ember accent on ink.
   ============================================================

   THE LOAD-BEARING METAPHOR — read before changing surfaces.

   Paper carries the human voice. Ink frames and closes.

   This is not a stylistic preference. It is the structural
   metaphor the entire system depends on, and it maps directly
   to Barry's positioning: human expertise stays at the center;
   AI/automation is the frame around the work, not the work itself.

     • PAPER (the warm off-white surfaces) is where prose lives.
       Wiki entries, project narratives, services explanations,
       about copy, field callouts. Anything a person reads at
       length. Anything spoken in the page voice (measured,
       observational, evidence-based).

     • INK (the dark navy surfaces) is where the system speaks
       in the mission voice (declarative, sometimes provocative).
       The cover. The footer. Manifesto pulls. Pull quotes.
       Hero media frames on project pages. Strategic accent
       moments inside otherwise-paper pages.

   THE RULE: ink surfaces never carry body prose. If you find
   yourself wanting to put a paragraph of explanatory text on
   ink, you are breaking the metaphor. The reader should never
   have to *read at length* against ink — they read short
   declarative statements (a headline, a quote, a CTA cluster)
   and then return to paper.

   If the design needs to change, change the metaphor first
   in conversation, then change the tokens. Don't change the
   tokens and discover the metaphor broke.

   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — INK (dark surfaces)
     Three stops, never one. Stratifying ink is what gives the
     cover layout depth. Use 100 for page closure (footer),
     200 for primary cover surface, 300 for elevated cards
     within ink contexts.
     ---------------------------------------------------------- */

  --color-ink-100: #14182A;   /* Deepest. Footer base. Page closure. */
  --color-ink-200: #1C2533;   /* Primary cover surface. Default dark. */
  --color-ink-300: #283145;   /* Elevated cards on dark, dividers, secondary blocks. */

  /* ----------------------------------------------------------
     COLOR — PAPER (light surfaces)
     Warm off-white, never pure #FFF. The paper warmth is what
     keeps the editorial register from sliding into "tech product."
     ---------------------------------------------------------- */

  --color-paper-100: #FBF7EE;   /* Primary paper surface. Default light. */
  --color-paper-200: #F4EFE6;   /* Recessed paper. Cards, callouts, pull-out blocks. */
  --color-paper-300: #E8DFCC;   /* Page background frame. Outermost container. */

  /* ----------------------------------------------------------
     COLOR — INK ON PAPER (text)
     Ink-on-paper text uses the navy stops. Black-on-paper
     reads as harsh. Navy-on-paper reads as printed.
     ---------------------------------------------------------- */

  --color-text-primary: #1C2533;     /* Headings, primary body emphasis. */
  --color-text-body: #2A2722;        /* Body prose. Slightly warmer than primary. */
  --color-text-secondary: #4A4640;   /* Secondary copy, descriptions, deck text. */
  --color-text-tertiary: #8A857B;    /* Meta, eyebrows on paper, captions. */
  --color-text-quaternary: #B8B0A0;  /* Disabled, very low-emphasis text on paper. */

  /* ----------------------------------------------------------
     COLOR — PAPER ON INK (text on dark surfaces)
     Mirror of the ink-on-paper hierarchy.
     ---------------------------------------------------------- */

  --color-text-inverse-primary: #FBF7EE;     /* Primary text on ink. */
  --color-text-inverse-secondary: #B8B0A0;   /* Secondary text on ink. Italic deck. */
  --color-text-inverse-tertiary: #8A93A8;    /* Meta on ink. Mono labels. */

  /* ----------------------------------------------------------
     COLOR — ACCENT
     The system uses ONE accent that swaps automatically based
     on surface. Sienna is calibrated for paper, ember for ink.
     They are functionally the same identity color at different
     luminance — the visitor never sees both at once because
     they never coexist on the same surface.
     ---------------------------------------------------------- */

  --color-accent-sienna: #B8451E;          /* Accent on paper surfaces. */
  --color-accent-sienna-hover: #9C3A18;     /* Sienna hover state. */
  --color-accent-ember: #C95428;           /* Accent on ink surfaces. */
  --color-accent-ember-hover: #DB6638;      /* Ember hover state. */

  /* The active accent — set by surface context (see .surface-* classes below). */
  --color-accent: var(--color-accent-sienna);
  --color-accent-hover: var(--color-accent-sienna-hover);

  /* ----------------------------------------------------------
     COLOR — BORDERS
     ---------------------------------------------------------- */

  --color-border-paper: #D8CFBE;     /* Default border on paper. */
  --color-border-paper-strong: #C8BFA8;   /* Page-frame border. */
  --color-border-ink: #283145;       /* Default border on ink. */
  --color-border-ink-strong: #3A4358;     /* Elevated border on ink. */

  /* ----------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     Source Serif 4 is the working placeholder for headlines.
     Swap to GT Sectra (preferred) or Tiempos when licensed —
     change only --font-serif and the system updates everywhere.
     ---------------------------------------------------------- */

  --font-serif: 'GT Sectra', 'Tiempos Headline', 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'iA Writer Mono', 'SF Mono', Menlo, ui-monospace, monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — SCALE
     Each token = font-size / line-height / weight / tracking.
     Use the semantic name (--type-h1) not the size — the scale
     can be retuned without rewriting markup.
     ---------------------------------------------------------- */

  /* Display — cover hero only. Max 18 words. */
  --type-display-size: 46px;
  --type-display-line: 1.06;
  --type-display-weight: 400;
  --type-display-tracking: -0.018em;

  /* H1 — page titles, wiki entry headlines, project names. */
  --type-h1-size: 38px;
  --type-h1-line: 1.1;
  --type-h1-weight: 400;
  --type-h1-tracking: -0.018em;

  /* H2 — section headings within long-form content. */
  --type-h2-size: 22px;
  --type-h2-line: 1.3;
  --type-h2-weight: 500;
  --type-h2-tracking: -0.005em;

  /* H3 — subsections, sidebar headings, card titles. Sans, not serif. */
  --type-h3-size: 17px;
  --type-h3-line: 1.35;
  --type-h3-weight: 500;
  --type-h3-tracking: -0.005em;

  /* Deck / lede — italic serif, one sentence below H1. */
  --type-deck-size: 19px;
  --type-deck-line: 1.5;
  --type-deck-weight: 400;
  --type-deck-style: italic;

  /* Body — prose paragraphs. Inter at reading-comfort settings. */
  --type-body-size: 15px;
  --type-body-line: 1.75;
  --type-body-weight: 400;

  /* Body small — captions, card descriptions, navigation. */
  --type-body-sm-size: 13px;
  --type-body-sm-line: 1.55;
  --type-body-sm-weight: 400;

  /* Eyebrow — mono, all-caps via CSS, wide tracking. */
  --type-eyebrow-size: 11px;
  --type-eyebrow-line: 1.45;
  --type-eyebrow-weight: 500;
  --type-eyebrow-tracking: 0.14em;

  /* Meta — dates, tags, timestamps. Mono, lower contrast. */
  --type-meta-size: 11px;
  --type-meta-line: 1.45;
  --type-meta-weight: 400;
  --type-meta-tracking: 0.05em;

  /* UI — buttons, form labels, navigation items. */
  --type-ui-size: 13px;
  --type-ui-line: 1.4;
  --type-ui-weight: 500;

  /* ----------------------------------------------------------
     SPACING — vertical rhythm
     Use rem for vertical rhythm, px for component-internal gaps.
     The scale is informally 4-based but doesn't need to be rigid.
     ---------------------------------------------------------- */

  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* ----------------------------------------------------------
     LAYOUT
     The reading column constraint is load-bearing. 620px at
     15px Inter is ~70 characters per line — the editorial
     reading-research sweet spot.
     ---------------------------------------------------------- */

  --layout-page-max: 1100px;          /* Outer page width. */
  --layout-content-max: 720px;        /* Long-form content max. */
  --layout-reading-max: 620px;        /* Body prose max. The reading column. */
  --layout-toc-width: 200px;          /* Sticky TOC sidebar. */
  --layout-marginalia-width: 180px;   /* Cover marginalia column. */

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */

  --radius-sm: 4px;     /* Pills, tags, small badges. */
  --radius-md: 5px;     /* Buttons, inputs. */
  --radius-lg: 8px;     /* Cards, callouts, content blocks. */
  --radius-xl: 10px;    /* Outer page sections. */
  --radius-2xl: 12px;   /* Page-frame container. */

  /* ----------------------------------------------------------
     BORDERS
     0.5px is deliberate — keeps borders visible without making
     them feel like UI chrome. Falls back to 1px on screens that
     can't render sub-pixel widths.
     ---------------------------------------------------------- */

  --border-hairline: 0.5px solid var(--color-border-paper);
  --border-hairline-ink: 0.5px solid var(--color-border-ink);
  --border-accent: 2px solid var(--color-accent);

  /* ----------------------------------------------------------
     STATE COLORS
     Used for form validation, system messaging, status badges.
     Keep these muted — they should not compete with the accent.
     ---------------------------------------------------------- */

  --color-state-success: #4A6E3F;
  --color-state-success-bg: #E8EFE2;
  --color-state-warning: #8A6620;
  --color-state-warning-bg: #F4EBD4;
  --color-state-danger: #8A2E22;
  --color-state-danger-bg: #F0DCD8;
}

/* ============================================================
   SURFACE CLASSES
   Apply these to a section, container, or page to set the
   surface context. The accent variable swaps automatically.

   REMINDER: paper carries human voice (prose, explanation,
   long-form reading). Ink frames and closes (declarations,
   quotes, CTAs, hero moments). Do not put body prose on ink.
   ============================================================ */

.surface-paper {
  background: var(--color-paper-100);
  color: var(--color-text-body);
  --color-accent: var(--color-accent-sienna);
  --color-accent-hover: var(--color-accent-sienna-hover);
  --color-text-on-surface: var(--color-text-primary);
  --color-text-on-surface-muted: var(--color-text-secondary);
  --color-text-on-surface-meta: var(--color-text-tertiary);
}

.surface-paper-recessed {
  background: var(--color-paper-200);
  color: var(--color-text-body);
  --color-accent: var(--color-accent-sienna);
  --color-text-on-surface: var(--color-text-primary);
  --color-text-on-surface-muted: var(--color-text-secondary);
  --color-text-on-surface-meta: var(--color-text-tertiary);
}

.surface-ink {
  background: var(--color-ink-200);
  color: var(--color-text-inverse-primary);
  --color-accent: var(--color-accent-ember);
  --color-accent-hover: var(--color-accent-ember-hover);
  --color-text-on-surface: var(--color-text-inverse-primary);
  --color-text-on-surface-muted: var(--color-text-inverse-secondary);
  --color-text-on-surface-meta: var(--color-text-inverse-tertiary);
}

.surface-ink-deep {
  background: var(--color-ink-100);
  color: var(--color-text-inverse-primary);
  --color-accent: var(--color-accent-ember);
  --color-text-on-surface: var(--color-text-inverse-primary);
  --color-text-on-surface-muted: var(--color-text-inverse-secondary);
  --color-text-on-surface-meta: var(--color-text-inverse-tertiary);
}

.surface-ink-elevated {
  background: var(--color-ink-300);
  color: var(--color-text-inverse-primary);
  --color-accent: var(--color-accent-ember);
  --color-text-on-surface: var(--color-text-inverse-primary);
  --color-text-on-surface-muted: var(--color-text-inverse-secondary);
  --color-text-on-surface-meta: var(--color-text-inverse-tertiary);
}

/* ============================================================
   BASE
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-text-body);
  background: var(--color-paper-300);
  margin: 0;
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   Use semantic classes — they pull from the scale tokens.
   ============================================================ */

.t-display {
  font-family: var(--font-serif);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
}

.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
}

.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
}

.t-deck {
  font-family: var(--font-serif);
  font-size: var(--type-deck-size);
  line-height: var(--type-deck-line);
  font-weight: var(--type-deck-weight);
  font-style: var(--type-deck-style);
  color: var(--color-text-on-surface-muted, var(--color-text-secondary));
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--type-body-sm-weight);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--color-accent);
  text-transform: uppercase;
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line);
  font-weight: var(--type-meta-weight);
  letter-spacing: var(--type-meta-tracking);
  color: var(--color-text-on-surface-meta, var(--color-text-tertiary));
}

.t-ui {
  font-family: var(--font-sans);
  font-size: var(--type-ui-size);
  line-height: var(--type-ui-line);
  font-weight: var(--type-ui-weight);
}