/* ============================================================
   BUFALO — Colors & Type Foundations · Bone & Linen System
   ------------------------------------------------------------
   Strict 4-pigment palette: Bone · Black · White · Purple.
   Every existing token (--violet-*, --gold-*, --ink-*) is
   re-routed onto this 4-color system so legacy inline styles
   automatically adopt the new aesthetic.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=Inter+Tight:wght@200;300;400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  color-scheme: light dark;

  /* ─────────── THE 4 PIGMENTS ─────────── */
  --bone:   #F4EFE6;
  --black:  #1A1815;
  --white:  #FFFFFF;
  --purple: #7E4CA5;

  /* Bone shades (gradient anchors — same pigment, slight tonal shift) */
  --bone-100: #FAF7F1;
  --bone-200: #F4EFE6;
  --bone-300: #E9E2D3;

  /* Black shades (deeper toward bottom of dark mode) */
  --black-900: #2A2723;
  --black-950: #1A1815;
  --black-1000: #0D0C0A;

  /* Purple alpha helpers */
  --purple-04: rgba(126, 76, 165, 0.04);
  --purple-08: rgba(126, 76, 165, 0.08);
  --purple-16: rgba(126, 76, 165, 0.16);
  --purple-24: rgba(126, 76, 165, 0.24);
  --purple-40: rgba(126, 76, 165, 0.40);
  --purple-60: rgba(126, 76, 165, 0.60);
  --purple-80: rgba(126, 76, 165, 0.80);

  /* ─────────── LEGACY BRAND TOKENS (kept for back-compat) ─────────── */
  --bufalo-ink:        var(--black);
  --bufalo-violet:     var(--purple);
  --bufalo-gold:       var(--purple);   /* ⟵ re-routed to purple */
  --bufalo-paper:      var(--white);

  /* ─────────── VIOLET SCALE (anchored to #7E4CA5) ─────────── */
  --violet-50:  #F3ECF8;
  --violet-100: #E3D2EE;
  --violet-200: #CBAFDF;
  --violet-300: #B28BD0;
  --violet-400: #9968C0;
  --violet-500: #7E4CA5;   /* brand */
  --violet-600: #663E85;
  --violet-700: #4E3066;
  --violet-800: #371F4A;
  --violet-900: #21132C;

  /* ─────────── GOLD SCALE → COLLAPSED TO PURPLE (4-color constraint) ─────────── */
  --gold-50:  var(--violet-50);
  --gold-100: var(--violet-100);
  --gold-200: var(--violet-200);
  --gold-300: var(--violet-300);
  --gold-400: var(--violet-400);
  --gold-500: var(--violet-500);
  --gold-600: var(--violet-600);
  --gold-700: var(--violet-700);
  --gold-800: var(--violet-800);
  --gold-900: var(--violet-900);

  /* ─────────── INK / NEUTRAL SCALE (light-mode defaults) ─────────── */
  --ink-0:    var(--white);
  --ink-25:   var(--bone-100);
  --ink-50:   var(--bone-200);
  --ink-100:  var(--bone-300);
  --ink-200:  rgba(26, 24, 21, 0.14);
  --ink-300:  rgba(26, 24, 21, 0.42);
  --ink-400:  rgba(26, 24, 21, 0.56);
  --ink-500:  rgba(26, 24, 21, 0.70);
  --ink-600:  rgba(26, 24, 21, 0.82);
  --ink-700:  rgba(26, 24, 21, 0.90);
  --ink-800:  var(--black-900);
  --ink-900:  var(--black-950);
  --ink-1000: var(--black-1000);

  /* ─────────── SEMANTIC (light-mode default) ─────────── */
  --bg:             var(--bone);
  --bg-grad-end:    var(--bone-300);
  --bg-subtle:      var(--bone-100);
  --bg-muted:       var(--bone-300);
  --surface:        var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--bone-300);
  --surface-card:   var(--white);

  --fg:           var(--black);
  --fg-strong:    var(--black);
  --fg-muted:     rgba(26, 24, 21, 0.66);
  --fg-subtle:    rgba(26, 24, 21, 0.48);
  --fg-disabled:  rgba(26, 24, 21, 0.30);
  --fg-on-violet: var(--bone);
  --fg-on-ink:    var(--bone);

  --border:        rgba(26, 24, 21, 0.14);
  --border-strong: rgba(26, 24, 21, 0.24);
  --border-focus:  var(--purple);
  --rule:          rgba(26, 24, 21, 0.14);
  --rule-strong:   rgba(26, 24, 21, 0.22);

  --accent:        var(--purple);
  --accent-hover:  var(--violet-600);
  --accent-press:  var(--violet-700);
  --accent-soft:   var(--purple-08);
  --accent-glow:   var(--purple-24);
  --ghost:         var(--black);
  --ghost-opacity: 0.045;
  --weave-alpha:   0.025;
  --noise-alpha:   0.12;

  /* ─────────── SEMANTIC STATES ─────────── */
  --success:    #5b7d3a;       /* moss-leaning, near brand */
  --success-bg: var(--purple-08);
  --warning:    var(--purple);
  --warning-bg: var(--purple-08);
  --danger:     #8a3a2a;
  --danger-bg:  rgba(138, 58, 42, 0.10);
  --info:       var(--purple);
  --info-bg:    var(--purple-08);

  /* ─────────── TYPOGRAPHY ─────────── */
  --font-display: 'Manrope', 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter Tight', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Type scale (refined) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 46px;
  --text-5xl: 60px;
  --text-6xl: 78px;
  --text-7xl: 104px;

  /* Line height */
  --lh-tight:   1.0;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Tracking */
  --ls-display:  -0.035em;
  --ls-heading:  -0.025em;
  --ls-body:     -0.005em;
  --ls-caps:     0.22em;
  --ls-caps-tight: 0.08em;

  /* Weights */
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ─────────── SPACING ─────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ─────────── RADII ─────────── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ─────────── BORDERS ─────────── */
  --border-1: 1px solid var(--border);
  --border-2: 1.5px solid var(--border-strong);

  /* ─────────── ELEVATION ─────────── */
  --shadow-xs:  0 1px 0 rgba(26, 24, 21, 0.04);
  --shadow-sm:  0 1px 2px rgba(26, 24, 21, 0.06), 0 1px 0 rgba(26, 24, 21, 0.03);
  --shadow-md:  0 6px 16px -4px rgba(26, 24, 21, 0.08), 0 2px 4px rgba(26, 24, 21, 0.04);
  --shadow-lg:  0 18px 40px -12px rgba(26, 24, 21, 0.18), 0 4px 8px rgba(26, 24, 21, 0.04);
  --shadow-xl:  0 30px 80px -20px rgba(26, 24, 21, 0.32);
  --shadow-violet: 0 14px 40px -16px rgba(126, 76, 165, 0.55);

  /* ─────────── MOTION ─────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-xslow:   720ms;
  --dur-theme:   550ms;
}

/* ============================================================
   DARK THEME — applied via [data-theme="dark"] on <html>
   Same 4 pigments, inverted role assignments.
   ============================================================ */
[data-theme="dark"] {
  --bg:             var(--black-950);
  --bg-grad-end:    var(--black-1000);
  --bg-subtle:      var(--black-900);
  --bg-muted:       var(--black-900);
  --surface:        rgba(244, 239, 230, 0.04);
  --surface-raised: rgba(244, 239, 230, 0.06);
  --surface-sunken: var(--black-1000);
  --surface-card:   rgba(244, 239, 230, 0.04);

  --fg:           var(--bone);
  --fg-strong:    var(--white);
  --fg-muted:     rgba(244, 239, 230, 0.62);
  --fg-subtle:    rgba(244, 239, 230, 0.42);
  --fg-disabled:  rgba(244, 239, 230, 0.26);
  --fg-on-violet: var(--bone);
  --fg-on-ink:    var(--bone);

  --border:        rgba(244, 239, 230, 0.12);
  --border-strong: rgba(244, 239, 230, 0.22);
  --rule:          rgba(244, 239, 230, 0.12);
  --rule-strong:   rgba(244, 239, 230, 0.20);

  --accent:        var(--purple);
  --accent-hover:  var(--violet-300);
  --accent-press:  var(--violet-200);
  --accent-soft:   var(--purple-16);
  --accent-glow:   rgba(126, 76, 165, 0.45);
  --ghost:         var(--bone);
  --ghost-opacity: 0.06;
  --weave-alpha:   0.018;
  --noise-alpha:   0.18;

  /* Ink scale in dark mode — bone-tinted alphas read as warm grays */
  --ink-0:   var(--bone);
  --ink-25:  rgba(244, 239, 230, 0.94);
  --ink-50:  rgba(244, 239, 230, 0.86);
  --ink-100: rgba(244, 239, 230, 0.72);
  --ink-200: rgba(244, 239, 230, 0.56);
  --ink-300: rgba(244, 239, 230, 0.62);
  --ink-400: rgba(244, 239, 230, 0.46);
  --ink-500: rgba(244, 239, 230, 0.34);
  --ink-600: rgba(244, 239, 230, 0.22);
  --ink-700: rgba(244, 239, 230, 0.14);
  --ink-800: var(--black-900);
  --ink-900: var(--black-950);
  --ink-1000: var(--black-1000);
}

/* ============================================================
   BASE STYLES
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  transition: background-color var(--dur-theme) var(--ease-soft),
              color var(--dur-theme) var(--ease-soft);
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-grad-end) 100%);
  background-attachment: fixed;
}

/* linen weave + grain — atmospheric */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--fg) calc(var(--weave-alpha) * 100%), transparent) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--fg) calc(var(--weave-alpha) * 100%), transparent) 0 1px,
      transparent 1px 3px);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: var(--noise-alpha);
}
[data-theme="dark"] body::after { mix-blend-mode: screen; }

/* Push real content above the fixed atmosphere layers */
body > * { position: relative; z-index: 2; }

/* ─────────── HEADINGS ─────────── */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .display {
  font-family: var(--font-display);
  color: var(--fg-strong);
  margin: 0;
  transition: color var(--dur-theme) var(--ease-soft);
}

.display {
  font-weight: var(--fw-light);
  font-size: var(--text-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
h1, .h1 { font-weight: var(--fw-light); font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2, .h2 { font-weight: var(--fw-light); font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
h3, .h3 { font-weight: var(--fw-medium); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
h4, .h4 { font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
h5, .h5 { font-weight: var(--fw-medium); font-size: var(--text-lg); line-height: var(--lh-snug); }

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  font-weight: var(--fw-light);
}

small, .small { font-size: var(--text-sm); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Serif italic — premium accent, used very sparingly */
.serif-it, em.accent, .accent.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent);
  letter-spacing: -0.02em;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
code {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
  color: var(--fg);
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--purple-24); color: var(--fg-strong); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-8) 0; }

/* ─────────── ACCESSIBILITY ─────────── */
.skip-nav {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.skip-nav:focus {
  position: fixed; left: 16px; top: 16px;
  width: auto; height: auto; padding: 10px 16px;
  background: var(--black); color: var(--bone);
  border-radius: var(--radius-md);
  z-index: 999;
}

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