/* ============================================================
   THE GOOD PEOPLE — design tokens
   colors · type · spacing · radii · shadows · motion
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Substitutes from Google Fonts — see README font flag */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..700,30..100,0..1&family=Inter+Tight:wght@300;400;500;600&family=Caveat:wght@400;500;600&display=swap');

/* ============================================================
   1. COLOR
   Earth, sun, soft green, deep ink, warm paper.
   No pure #000, no pure #fff anywhere in the system.
   ============================================================ */

:root {
  /* ----- Brand primaries ----- */

  /* Olive — grounded green, the one accent.
     Replaces the previous "Clay" terracotta. Reads botanical & conscious,
     never tech-orange. Same role: spend it once per screen. */
  --olive-50:   #eef0e3;
  --olive-100:  #dde2ca;
  --olive-200:  #b9c294;
  --olive-300:  #98a26d;
  --olive-400:  #788455;
  --olive-500:  #5a6b3d;   /* primary brand */
  --olive-600:  #495830;
  --olive-700:  #3a4626;
  --olive-800:  #2a341a;
  --olive-900:  #1c2310;

  /* Ochre — sunlight */
  --ochre-50:  #fbf3df;
  --ochre-100: #f5e5b7;
  --ochre-200: #ecd283;
  --ochre-300: #dfb84a;
  --ochre-400: #c99a25;
  --ochre-500: #a87d14;   /* warm gold accent */
  --ochre-600: #8a630e;

  /* Sage — quiet green for nature + success */
  --sage-50:   #eef0e8;
  --sage-100:  #dde2cc;
  --sage-200:  #c1c9a8;
  --sage-300:  #9ba884;
  --sage-400:  #7a8966;
  --sage-500:  #5d6b4c;
  --sage-600:  #46523a;

  /* Indigo — dusk / evening / music */
  --indigo-50:  #e6e3ec;
  --indigo-100: #c7c0d4;
  --indigo-200: #9c92b0;
  --indigo-300: #6e6385;
  --indigo-400: #4a4163;
  --indigo-500: #2f2745;   /* dusk */
  --indigo-600: #1f1830;

  /* ----- Neutrals — warm, never gray ----- */

  /* Ink — body text, always slightly warm */
  --ink-50:   #f2ece7;
  --ink-100:  #d9cfc6;
  --ink-200:  #b6a89c;
  --ink-300:  #8c7c6e;
  --ink-400:  #5c4f44;
  --ink-500:  #3a2f27;
  --ink-600:  #2a211a;   /* default text */
  --ink-700:  #1c1611;
  --ink-800:  #110d0a;

  /* Paper — warm cream backgrounds */
  --paper-50:  #fcfaf5;
  --paper-100: #f8f3ea;   /* default page */
  --paper-200: #f1ead9;
  --paper-300: #e7ddc6;
  --paper-400: #d9ccb0;

  /* ----- Alphas off ink for borders / overlays ----- */
  --ink-a04: rgba(42, 33, 26, 0.04);
  --ink-a08: rgba(42, 33, 26, 0.08);
  --ink-a12: rgba(42, 33, 26, 0.12);
  --ink-a20: rgba(42, 33, 26, 0.20);
  --ink-a40: rgba(42, 33, 26, 0.40);
  --ink-a60: rgba(42, 33, 26, 0.60);

  /* ============================================================
     SEMANTIC TOKENS
     Always reference these in product code, not raw palette steps.
     ============================================================ */

  /* Surfaces */
  --bg:           var(--paper-100);
  --bg-soft:      var(--paper-50);
  --bg-sunk:      var(--paper-200);
  --bg-inverse:   var(--indigo-500);
  --bg-olive:     var(--olive-500);
  --bg-sage:      var(--sage-500);

  /* Foreground (text) */
  --fg:           var(--ink-600);
  --fg-1:         var(--ink-600);   /* primary text */
  --fg-2:         var(--ink-400);   /* secondary text */
  --fg-3:         var(--ink-300);   /* tertiary / placeholders */
  --fg-faint:     var(--ink-a40);
  --fg-on-dark:   var(--paper-50);
  --fg-on-olive:  var(--paper-50);

  /* Accent / interactive */
  --accent:        var(--olive-500);
  --accent-hover:  var(--olive-600);
  --accent-press:  var(--olive-700);
  --accent-soft:   var(--olive-50);
  --highlight:     var(--ochre-200);   /* underline-marker yellow */

  /* Borders + dividers */
  --rule:         var(--ink-a12);
  --rule-strong:  var(--ink-a20);
  --rule-faint:   var(--ink-a08);

  /* States */
  --success: var(--sage-500);
  --warning: var(--ochre-500);
  --danger:  #a23a23;   /* warm brick — distinct from olive */
  --info:    var(--indigo-400);

  /* Focus */
  --focus-ring: var(--olive-500);

  /* ============================================================
     2. TYPE
     ============================================================ */

  --font-display: 'Fraunces', 'Tiempos Headline', 'GT Sectra', Georgia, serif;
  --font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --font-script:  'Caveat', 'Caveat Brush', 'Reenie Beanie', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display sizing — large editorial */
  --type-display-xl:  clamp(64px, 9vw, 140px);
  --type-display-lg:  clamp(48px, 6.5vw, 96px);
  --type-display-md:  clamp(36px, 4.5vw, 64px);
  --type-display-sm:  clamp(28px, 3vw, 44px);

  /* Body sizing */
  --type-xl: 24px;   /* lead paragraph */
  --type-lg: 20px;
  --type-md: 17px;   /* default body */
  --type-sm: 15px;
  --type-xs: 13px;
  --type-2xs: 11px;  /* small caps eyebrows */

  /* Line heights */
  --lh-display: 1.04;
  --lh-tight:   1.18;
  --lh-snug:    1.35;
  --lh-body:    1.55;
  --lh-loose:   1.72;

  /* Tracking */
  --track-display: -0.02em;
  --track-body:     0;
  --track-eyebrow:  0.18em;   /* small caps */

  /* Weights */
  --w-light:  300;
  --w-book:   400;
  --w-medium: 500;
  --w-semi:   600;

  /* ============================================================
     3. SPACING — relaxed scale, breathable
     ============================================================ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;

  /* Content width caps */
  --measure-prose:  64ch;   /* readable column */
  --measure-narrow: 44ch;   /* poems, manifestos */
  --measure-wide:   1280px; /* page max */
  --gutter:         max(24px, 4vw);

  /* ============================================================
     4. RADII — tight scale, never SaaS-blobby
     ============================================================ */
  --r-0:    0;
  --r-sm:   4px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* ============================================================
     5. SHADOWS — almost absent, warm
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(45, 26, 21, 0.04);
  --shadow-md: 0 8px 24px -12px rgba(45, 26, 21, 0.12);
  --shadow-lg: 0 24px 60px -24px rgba(45, 26, 21, 0.18);

  /* ============================================================
     6. MOTION
     ============================================================ */
  --ease-warm:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-quiet: cubic-bezier(0.4, 0.0, 0.2, 1);

  --dur-fast:   180ms;
  --dur-base:   400ms;
  --dur-slow:   700ms;
  --dur-hero:   1200ms;

  /* ============================================================
     7. LAYOUT
     ============================================================ */
  --nav-h: 64px;
  --grid-gutter: 24px;
  --grid-cols: 12;
}

/* ============================================================
   DUSK MODE — for evenings, music programs, emotional layouts.
   Not a "dark mode" toggle — an opt-in surface treatment.
   Apply with: <section class="dusk"> or [data-theme="dusk"]
   ============================================================ */
.dusk,
[data-theme="dusk"] {
  --bg:         var(--indigo-500);
  --bg-soft:    var(--indigo-400);
  --bg-sunk:    var(--indigo-600);
  --fg:         var(--paper-50);
  --fg-1:       var(--paper-50);
  --fg-2:       rgba(248, 243, 234, 0.72);
  --fg-3:       rgba(248, 243, 234, 0.48);
  --rule:       rgba(248, 243, 234, 0.16);
  --rule-faint: rgba(248, 243, 234, 0.08);
  --accent:     var(--olive-300);
  --accent-hover: var(--olive-200);
  --highlight:  var(--ochre-300);
}

/* ============================================================
   GLOBAL ELEMENT STYLES
   Bring in via <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--lh-body);
  font-weight: var(--w-book);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — sentence case, soft serif */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-weight: var(--w-light);
  font-variation-settings: "opsz" 144, "SOFT" 70;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: var(--w-light);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--type-display-sm);
  line-height: var(--lh-tight);
  font-weight: var(--w-book);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--type-lg);
  line-height: var(--lh-snug);
  font-weight: var(--w-medium);
  color: var(--fg-1);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  max-width: var(--measure-prose);
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-family: var(--font-body);
  font-size: var(--type-xl);
  line-height: var(--lh-snug);
  font-weight: var(--w-light);
  color: var(--fg-1);
  max-width: var(--measure-prose);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.script {
  font-family: var(--font-script);
  font-weight: var(--w-book);
  color: var(--accent);
  /* Caveat optical size — pull baseline down a hair */
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.06em;
}

/* Marked highlight — a warm yellow underline mark */
mark, .mark {
  background: linear-gradient(transparent 62%, var(--highlight) 62%, var(--highlight) 92%, transparent 92%);
  color: inherit;
  padding: 0 .05em;
}

/* Links */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-a40);
  transition: text-decoration-color var(--dur-fast) var(--ease-warm), text-underline-offset var(--dur-fast) var(--ease-warm);
}
a:hover {
  text-decoration-color: var(--accent);
  text-underline-offset: 6px;
}

/* Editorial horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--ochre-200);
  color: var(--ink-700);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}