/* ============================================================
   THEOLOTREE — DESIGN TOKENS (colors, type, spacing, effects, base)
   Consolidated from the Theolotree design system. Self-contained,
   no external CDN. Fonts are loaded locally via assets/fonts/fonts.css.
   ============================================================ */

/* ============================================================
   COLOR TOKENS
   Earthy, grounded, scholarly. Deep pine green + harvest amber
   on warm parchment neutrals. Warm throughout, no cool grays.
   ============================================================ */
:root {
  /* PINE (primary): forest green, roots & evergreen growth */
  --pine-50:  #eef3ef;
  --pine-100: #d6e3da;
  --pine-200: #aec7b6;
  --pine-300: #7ea38d;
  --pine-400: #4f7d65;
  --pine-500: #2f5d46;
  --pine-600: #244a38;
  --pine-700: #1d3b2d;
  --pine-800: #172e23;
  --pine-900: #11211a;
  --pine-950: #0b1611;

  /* AMBER (accent): lamplight, harvest, the reward of effort */
  --amber-50:  #fbf3e6;
  --amber-100: #f6e3c4;
  --amber-200: #edc888;
  --amber-300: #e3ac4f;
  --amber-400: #d4912a;
  --amber-500: #bd7a1d;
  --amber-600: #9c621a;
  --amber-700: #7a4d18;
  --amber-800: #5c3a14;
  --amber-900: #3f2810;

  /* BONE / STONE / INK (warm neutrals): parchment to dark wood */
  --bone-50:  #faf7f0;
  --bone-100: #f3ede0;
  --bone-200: #e6dcc8;
  --stone-300: #cfc3a9;
  --stone-400: #a89c80;
  --stone-500: #7d7259;
  --stone-600: #5c5340;
  --ink-700:  #403a2d;
  --ink-800:  #2b271e;
  --ink-900:  #1a1712;
  --ink-950:  #100e0a;

  /* SEMANTIC HUES */
  --clay-500:  #b3402e;  /* danger */
  --clay-100:  #f4ddd6;
  --slate-500: #3f6b82;  /* info */
  --slate-100: #dde7ec;
  --leaf-500:  #3a7d4f;  /* success */
  --leaf-100:  #d9ecdf;

  /* SEMANTIC ALIASES — reference these, not raw scales */
  --brand:            var(--pine-700);
  --brand-strong:     var(--pine-800);
  --brand-soft:       var(--pine-100);
  --brand-contrast:   var(--bone-50);
  --accent:           var(--amber-400);
  --accent-strong:    var(--amber-500);
  --accent-soft:      var(--amber-100);
  --accent-contrast:  var(--ink-950);

  /* Surfaces — light theme (parchment) */
  --surface-page:     var(--bone-50);
  --surface-sunken:   var(--bone-100);
  --surface-card:     #ffffff;
  --surface-raised:   #ffffff;
  --surface-inverse:  var(--pine-900);
  --surface-accent:   var(--amber-50);

  /* Text */
  --text-strong:      var(--ink-950);
  --text-body:        var(--ink-800);
  --text-muted:       var(--stone-500);
  --text-faint:       var(--stone-400);
  --text-on-brand:    var(--bone-50);
  --text-on-accent:   var(--ink-950);
  --text-link:        var(--pine-600);

  /* Borders & dividers */
  --border-subtle:    var(--bone-200);
  --border-default:   var(--stone-300);
  --border-strong:    var(--stone-400);
  --border-brand:     var(--pine-700);
  --ring:             var(--amber-400);

  /* Semantic feedback */
  --success:          var(--leaf-500);
  --success-soft:     var(--leaf-100);
  --warning:          var(--amber-500);
  --warning-soft:     var(--amber-100);
  --danger:           var(--clay-500);
  --danger-soft:      var(--clay-100);
  --info:             var(--slate-500);
  --info-soft:        var(--slate-100);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   Bitter (slab serif) for display & scripture, IBM Plex Sans for
   body/UI, IBM Plex Mono for verse refs & labels.
   ============================================================ */
:root {
  --font-display: 'Bitter', 'Georgia', serif;
  --font-scripture: 'Bitter', 'Georgia', serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.12em;
}

/* ============================================================
   SPACING & SIZING TOKENS — 4px base grid
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   4rem;
  --space-10:  5rem;
  --space-12:  6rem;

  --container-prose: 42rem;
  --container-app:   72rem;
  --container-wide:  84rem;

  --control-sm: 2rem;
  --control-md: 2.625rem;
  --control-lg: 3.25rem;
}

/* ============================================================
   EFFECTS: radii, borders, shadows, motion
   ============================================================ */
:root {
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-pill: 999px;

  --border-hair:  1px;
  --border-thick: 2px;

  --shadow-xs:  0 1px 2px rgba(26, 23, 18, 0.06);
  --shadow-sm:  0 1px 2px rgba(26, 23, 18, 0.08), 0 2px 4px rgba(26, 23, 18, 0.04);
  --shadow-md:  0 2px 4px rgba(26, 23, 18, 0.08), 0 6px 12px rgba(26, 23, 18, 0.06);
  --shadow-lg:  0 4px 8px rgba(26, 23, 18, 0.08), 0 16px 28px rgba(26, 23, 18, 0.10);
  --shadow-inset: inset 0 1px 2px rgba(26, 23, 18, 0.10);
  --shadow-ring: 0 0 0 3px rgba(212, 145, 42, 0.40);

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   BASE ELEMENT DEFAULTS & brand primitives
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  margin: 0;
}

a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-strong);
}

::selection { background: var(--amber-200); color: var(--ink-950); }