/* ==========================================================================
   BEYOND DATA — DESIGN TOKENS
   The single source of truth for color, type, space, radius, elevation,
   and motion. Everything else in the codebase should reference these.
   ========================================================================== */

:root {
  /* ── Color · Ink (text, borders, surfaces) — warm-tinted scale ─────────── */
  --ink-900: #14110B;
  --ink-700: #1C1A14;
  --ink-500: #44403A;
  --ink-300: #756F65;
  --ink-200: #A39E94;
  --ink-100: #DDD7CB;
  --ink-50:  #F0EBE0;

  /* ── Color · Paper (backgrounds) ───────────────────────────────────────── */
  --paper:      #FAF7F0;  /* warm cream — primary bg */
  --paper-pure: #FEFDF8;  /* card bg, near-white but warm */
  --paper-warm: #F3EDDF;  /* section bg, deeper warm */

  /* ── Color · Accent (primary, burnt sienna) ────────────────────────────── */
  --accent-900: #6B2F15;
  --accent-700: #A8512D;
  --accent-500: #C97A55;
  --accent-200: #E8C2AC;
  --accent-50:  #F8E9DD;

  /* ── Color · Data (forest green — numbers, metrics, brand details) ─────── */
  --data-900: #1F3D2F;
  --data-700: #3F6E5D;
  --data-500: #5A8A78;
  --data-200: #A5C2B5;
  --data-50:  #E1ECE6;

  /* ── Color · Semantic — warmed to match palette ────────────────────────── */
  --success: #4A6B3F;
  --warning: #B8741C;
  --danger:  #9E3A2E;
  --info:    var(--data-700);

  /* ── Type · Families ───────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ── Type · Scale (modular 1.25, anchored at 16px) ─────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;
  --text-6xl:  4.5rem;

  /* ── Type · Line height ────────────────────────────────────────────────── */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Type · Letter spacing ─────────────────────────────────────────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── Type · Weight ─────────────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Space · 4px base ──────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --radius-sharp: 2px;
  --radius-soft:  6px;
  --radius-card:  12px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  /* ── Elevation (each step is genuinely different) ──────────────────────── */
  /* Shadows tinted with the warm ink rgb so they sit on cream paper without
     looking blue-gray (a common tell of generic shadow stacks). */
  --shadow-1: 0 1px 2px rgba(28, 26, 20, 0.05), 0 1px 3px rgba(28, 26, 20, 0.07);
  --shadow-2: 0 2px 4px rgba(28, 26, 20, 0.06), 0 6px 14px rgba(28, 26, 20, 0.09);
  --shadow-3: 0 8px 16px rgba(28, 26, 20, 0.09), 0 18px 40px rgba(28, 26, 20, 0.12);
  --shadow-4: 0 24px 56px rgba(28, 26, 20, 0.20);
  --shadow-focus: 0 0 0 3px rgba(168, 81, 45, 0.22);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --max-w-prose:   72ch;
  --max-w-content: 1200px;

  /* ── Legacy aliases — keep existing templates working without find/replace
       New code should reference the tokens above directly. ─────────────────── */
  --primary-color:   var(--accent-700);
  --accent-color:    var(--data-500);
  --secondary-color: var(--ink-50);
  --highlight-color: var(--ink-700);
  --dark-color:      var(--ink-700);
  --light-color:     var(--ink-50);
  --info-color:      var(--data-500);
  --success-color:   var(--success);
  --warning-color:   var(--warning);
  --danger-color:    var(--danger);
  --font-family:     var(--font-body);
}


/* ==========================================================================
   BOOTSTRAP CSS VARIABLE OVERRIDES
   tokens.css loads after bootstrap.min.css, so :root values declared here
   win on source order. This is what makes `text-primary`, `bg-primary`,
   `badge bg-primary`, `btn-primary`, `alert-*`, `border-primary`, link
   styles, body backgrounds, and the rest of Bootstrap's utility surface
   render in the warm-editorial palette without touching the templates.

   Bootstrap exposes both hex and -rgb variants because its bg-opacity-* and
   text-opacity-* utilities reference the comma-separated rgb form. Both
   must be set in lockstep, or opacity utilities will paint with the old
   default color while the solid utility uses the new one.
   ========================================================================== */
:root {
  /* Primary → burnt sienna */
  --bs-primary:       #A8512D;
  --bs-primary-rgb:   168, 81, 45;

  /* Secondary → mid warm ink */
  --bs-secondary:     #44403A;
  --bs-secondary-rgb: 68, 64, 58;

  /* Success → warm olive */
  --bs-success:       #4A6B3F;
  --bs-success-rgb:   74, 107, 63;

  /* Info → forest (our "data" hue) */
  --bs-info:          #3F6E5D;
  --bs-info-rgb:      63, 110, 93;

  /* Warning → warm amber */
  --bs-warning:       #B8741C;
  --bs-warning-rgb:   184, 116, 28;

  /* Danger → warm brick */
  --bs-danger:        #9E3A2E;
  --bs-danger-rgb:    158, 58, 46;

  /* Light / Dark surfaces */
  --bs-light:         #FEFDF8;
  --bs-light-rgb:     254, 253, 248;
  --bs-dark:          #14110B;
  --bs-dark-rgb:      20, 17, 11;

  /* Body / surface */
  --bs-body-color:        #1C1A14;
  --bs-body-color-rgb:    28, 26, 20;
  --bs-body-bg:           #FAF7F0;
  --bs-body-bg-rgb:       250, 247, 240;

  /* Emphasis / muted text */
  --bs-emphasis-color:        #14110B;
  --bs-emphasis-color-rgb:    20, 17, 11;
  --bs-secondary-color:       #44403A;
  --bs-secondary-color-rgb:   68, 64, 58;
  --bs-tertiary-color:        #756F65;
  --bs-tertiary-color-rgb:    117, 111, 101;

  /* Subtle surface backgrounds */
  --bs-secondary-bg:       #F0EBE0;
  --bs-secondary-bg-rgb:   240, 235, 224;
  --bs-tertiary-bg:        #F3EDDF;
  --bs-tertiary-bg-rgb:    243, 237, 223;

  /* Borders */
  --bs-border-color:             #DDD7CB;
  --bs-border-color-translucent: rgba(28, 26, 20, 0.10);

  /* Links */
  --bs-link-color:         #A8512D;
  --bs-link-color-rgb:     168, 81, 45;
  --bs-link-hover-color:   #6B2F15;
  --bs-link-hover-color-rgb: 107, 47, 21;
  --bs-link-decoration:    underline;

  /* Make Bootstrap use our type families everywhere */
  --bs-font-sans-serif: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --bs-font-monospace:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* Bootstrap 5.3 "subtle" palette — used by alert-*, list-group-item-*, etc.
     Warm-tinted to match our admonitions. */
  --bs-primary-bg-subtle:    #F8E9DD;
  --bs-secondary-bg-subtle:  #F0EBE0;
  --bs-success-bg-subtle:    #E8EFDC;
  --bs-info-bg-subtle:       #E1ECE6;
  --bs-warning-bg-subtle:    #FBEFD9;
  --bs-danger-bg-subtle:     #F5DDD7;
  --bs-light-bg-subtle:      #FEFDF8;
  --bs-dark-bg-subtle:       #DDD7CB;

  --bs-primary-border-subtle:   #E8C2AC;
  --bs-secondary-border-subtle: #DDD7CB;
  --bs-success-border-subtle:   #C2D1AE;
  --bs-info-border-subtle:      #A5C2B5;
  --bs-warning-border-subtle:   #E5C189;
  --bs-danger-border-subtle:    #D9A199;
  --bs-light-border-subtle:     #F0EBE0;
  --bs-dark-border-subtle:      #A39E94;

  --bs-primary-text-emphasis:   #6B2F15;
  --bs-secondary-text-emphasis: #1C1A14;
  --bs-success-text-emphasis:   #2D4326;
  --bs-info-text-emphasis:      #1F3D2F;
  --bs-warning-text-emphasis:   #6F4710;
  --bs-danger-text-emphasis:    #5E211B;
}

/* Bootstrap's .text-bg-* utilities pair text color with background.
   Tweak primary/success/etc so the paired text remains legible on the
   new warm fills. */
.text-bg-primary { background-color: var(--bs-primary) !important; color: var(--bs-light) !important; }
.text-bg-secondary { background-color: var(--bs-secondary) !important; color: var(--bs-light) !important; }
.text-bg-success { background-color: var(--bs-success) !important; color: var(--bs-light) !important; }
.text-bg-info    { background-color: var(--bs-info)    !important; color: var(--bs-light) !important; }
.text-bg-warning { background-color: var(--bs-warning) !important; color: var(--bs-light) !important; }
.text-bg-danger  { background-color: var(--bs-danger)  !important; color: var(--bs-light) !important; }
.text-bg-dark    { background-color: var(--bs-dark)    !important; color: var(--bs-light) !important; }
.text-bg-light   { background-color: var(--bs-light)   !important; color: var(--bs-body-color) !important; }


/* Respect reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}