/* ============================================================
   ONYISI Design Tokens — v1 (2026-07-06)
   Source of truth for every digital surface: website (all
   stages), carousels, thumbnails via template, email.
   Derived from brand-guide.md. Change tokens here, nowhere else.
   ============================================================ */

:root {
  /* ---- Color: core (extracted from real assets) ---- */
  --ink:          #47433D;  /* wordmark charcoal — text, logo, chrome */
  --paper:        #FAF8F5;  /* warm off-white — default ground */
  --paper-bright: #FFFFFF;  /* pure white — cards on paper */
  --accent:       #602830;  /* tunic maroon — CTAs, links, emphasis */

  /* ---- Color: the three beats (RATIFIED 2026-07-06) ---- */
  --beat-system:  #47433D;  /* THE SYSTEM — ink; the machine as it claims to be */
  --beat-break:   #602830;  /* THE BREAK — maroon; where it fails */
  --beat-fix:     #4A5D46;  /* THE FIX — muted moss; the repair (new, warm-matched) */

  /* ---- Color: supporting neutrals ---- */
  --ink-muted:    #8A857C;  /* secondary text, captions */
  --line:         #E5E1DA;  /* hairlines, card borders */
  --ink-inverse:  #FAF8F5;  /* text on ink/accent grounds */

  /* ---- Typography (RATIFIED 2026-07-06; both free Google Fonts) ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* grotesque: headlines, thumbnails, UI */
  --font-body:    "Source Serif 4", Georgia, serif;                  /* longform reading */

  --text-display: 700 2.75rem/1.15 var(--font-display);  /* 44px — hero, thumbnail-scale */
  --text-h1:      700 2rem/1.2   var(--font-display);    /* 32px */
  --text-h2:      700 1.5rem/1.25 var(--font-display);   /* 24px */
  --text-h3:      600 1.1875rem/1.3 var(--font-display); /* 19px — beat labels */
  --text-body:    400 1.0625rem/1.65 var(--font-body);   /* 17px — essays */
  --text-caption: 400 0.875rem/1.45 var(--font-display); /* 14px — chips, meta */

  --tracking-label: 0.08em;  /* uppercase beat labels + TD chips */

  /* ---- Spacing (4px base) ---- */
  --s-1: 0.25rem;  /* 4  */
  --s-2: 0.5rem;   /* 8  */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-6: 1.5rem;   /* 24 */
  --s-8: 2rem;     /* 32 */
  --s-12: 3rem;    /* 48 */
  --s-16: 4rem;    /* 64 */

  /* ---- Shape ---- */
  --radius-card: 8px;
  --radius-chip: 999px;
  --border: 1px solid var(--line);

  /* ---- Elevation (used sparingly — print-like flatness is the style) ---- */
  --shadow-card: 0 1px 3px rgba(71, 67, 61, 0.08);

  /* ---- Layout ---- */
  --measure: 42rem;      /* max text column ~672px */
  --page-max: 72rem;     /* site container */
}

/* ---- Base application ---- */
.onyisi-base {
  background: var(--paper);
  color: var(--ink);
  font: var(--text-body);
}

/* ---- Primitives ---- */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--ink-inverse);
  font: var(--text-caption);
  font-weight: 600;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-chip);
  border: none;
  text-decoration: none;
  cursor: pointer;
}
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--ink);
  font: var(--text-caption);
  font-weight: 600;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-chip);
  border: 1.5px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.chip {
  display: inline-block;
  font: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-chip);
  border: var(--border);
  color: var(--ink-muted);
}
.card {
  background: var(--paper-bright);
  border: var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
}
.beat-label {
  font: var(--text-h3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.beat-label--system { color: var(--beat-system); }
.beat-label--break  { color: var(--beat-break); }
.beat-label--fix    { color: var(--beat-fix); }
a { color: var(--accent); }