:root {
  /* ===========================
     Palette (shared brand)
     =========================== */

  /* Forest */
  --forest-900: #04110c;
  --forest-850: #061510;
  --forest-825: #071813;
  --forest-780: #0b241a;  /* deep forest (use sparingly on light UI) */
  --forest-600: #103124;  /* true forest green for BLAB UI */

  /* Linen / parchment (green-tinted, not yellow) */
  --parchment-25:  #f9fdfb;
  --parchment-50:  #f3f9f4;
  --parchment-100: #ecf4ee;
  --parchment-150: #e1ece4;
  --parchment-200: #d3e1d8;

  /* Ink */
  --ink-900: #0b1512;
  --ink-700: #1d2e26;

  /* Accent highlights (markup only) */
  --gold-500:   #f3c76a;
  --teal-500:   #0f766e;
  --blue-500:   #5aa7ff;
  --purple-500: #a78bfa;

  /* ===========================
     Semantics (BLAB = light storefront)
     =========================== */
  color-scheme: light;

  /* Page */
  --bl-bg:         var(--parchment-25);
  --bl-bg-2:       var(--parchment-50);
  --bl-surface:    var(--parchment-50);
  --bl-surface-2:  var(--parchment-100);

  --bl-border:        var(--parchment-150);
  --bl-border-strong: color-mix(in srgb, var(--forest-600) 22%, var(--parchment-150));

  /* Text */
  --bl-text:  var(--ink-900);
  --bl-muted: color-mix(in srgb, var(--ink-700) 78%, var(--parchment-25));

  /* Brand spine (IMPORTANT)
     Use true forest on light UI; keep deep forest for depth only. */
  --bl-brand:        var(--forest-600);
  --bl-brand-raise:  color-mix(in srgb, var(--forest-600) 86%, var(--parchment-25));
  --bl-brand-deep:   var(--forest-780);

  /* Links */
  --bl-link:       var(--bl-brand);
  --bl-link-hover: var(--teal-500);

  /* Accents */
  --bl-accent-yellow: var(--gold-500);
  --bl-accent-teal:   var(--teal-500);
  --bl-accent-blue:   var(--blue-500);
  --bl-accent-purple: var(--purple-500);

  /* Focus + selection */
  --bl-focus-ring:    rgba(15, 118, 110, 0.55);
  --bl-selection-bg:  rgba(15, 118, 110, 0.14);
  --bl-selection-fg:  var(--ink-900);

  /* Buttons */
  --bl-btn-primary-bg:     var(--bl-brand);
  --bl-btn-primary-fg:     var(--parchment-25);
  --bl-btn-primary-border: color-mix(in srgb, var(--bl-brand) 82%, var(--bl-brand-deep));

  --bl-btn-ghost-bg:       transparent;
  --bl-btn-ghost-fg:       var(--bl-brand);
  --bl-btn-ghost-border:   color-mix(in srgb, var(--bl-brand) 22%, var(--bl-border));

  /* Subtle “retail” shadows */
  --bl-shadow-1: 0 0.22rem 0.85rem rgba(4, 17, 12, 0.07);
  --bl-shadow-2: 0 0.75rem 2.2rem  rgba(4, 17, 12, 0.11);

  /* ===========================
     Layout + type
     =========================== */
  --bl-maxw: 1120px;
  --bl-topbar-h: 66px;

  --bl-radius-sm: 10px;
  --bl-radius-md: 14px;
  --bl-radius-lg: 18px;

  --bl-space-2: 10px;
  --bl-space-3: 14px;
  --bl-space-4: 18px;
  --bl-space-5: 24px;
  --bl-space-6: 32px;
  --bl-space-7: 44px;
  --bl-space-8: 64px;

  --bl-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --bl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bl-text-xs: 0.84rem;
  --bl-text-sm: 0.94rem;
  --bl-text-md: 1.05rem;
  --bl-text-lg: 1.22rem;
  --bl-text-xl: 1.6rem;
  --bl-text-2xl: 2.05rem;
  --bl-text-3xl: 2.6rem;

  --bl-lh-tight: 1.15;
  --bl-lh-normal: 1.45;
  --bl-lh-relaxed: 1.65;
}