:root {
  /* ── Palette: Image-Derived Warm Dark ──────
       Source: k-means in CIE L*a*b* over 35 site images.
       B&W images define the neutral scale; colour images supply the rust accent.
       See design/palettes.json for the full extraction.          */

  --bg:            #1f1a16;   /* darkest B&W neutral — deep warm brown */
  --bg-raised:     #2b2420;   /* lifted surface, cards, mobile menu */
  --bg-light:      #e8dfd4;   /* light section — warm cream from B&W */
  --bg-light-alt:  #d4c9ba;   /* subtle light surface variant */

  --accent:        #c08c24;
  --accent-light:  #dcb055;
  --accent-dim:    rgba(192, 140, 36, 0.12);
  --accent-glow:   rgba(192, 140, 36, 0.28);
  --accent-dark:   #7a5c10;

  --text:          #ece3d9;   /* primary text on dark — warm cream */
  --text-muted:    #8a7d72;   /* secondary text, nav links */
  --text-dim:      #a0978c;   /* tertiary text, footer metadata — lighter than muted for AA on dark */
  --text-dark:     #1a1612;   /* text on light sections */
  --text-dark-secondary: #4a403a;

  --border:        rgba(255, 255, 255, 0.10);
  --border-light:  rgba(255, 255, 255, 0.05);
  --border-dark:   rgba(26, 22, 18, 0.12);

  /* ── Typography ─────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Fluid type scale ───────────────────── */
  --text-xs:   clamp(0.69rem, 0.2vw, 0.75rem);
  --text-sm:   clamp(0.8rem, 0.3vw, 0.875rem);
  --text-base: clamp(0.94rem, 0.5vw, 1rem);
  --text-lg:   clamp(1.06rem, 0.7vw, 1.125rem);
  --text-xl:   clamp(1.25rem, 1vw, 1.375rem);
  --text-2xl:  clamp(1.75rem, 1.5vw, 1.875rem);
  --text-3xl:  clamp(2.25rem, 2.5vw, 2.625rem);
  --text-4xl:  clamp(2.75rem, 4vw, 3.5rem);
  --text-5xl:  clamp(3.5rem, 6vw, 5rem);
  --text-6xl:  clamp(4rem, 8vw, 7rem);

  /* ── Line heights ───────────────────────── */
  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── Spacing ────────────────────────────── */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ── Layout ─────────────────────────────── */
  --max-width:  1280px;
  --nav-height: 64px;

  /* ── Animation ──────────────────────────── */
  --dur-fast:   150ms;
  --dur-normal: 400ms;
  --dur-slow:   700ms;
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Texture ────────────────────────────── */
  --grain: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC42NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPgogIDxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuNTUiLz4KPC9zdmc+");

  /* ── Textures ─────────────────────────────── */
  --grain-dark:  url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC42NSIgbnVtT2N0YXZlcz0iNCIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuNTUiLz48L3N2Zz4=");
  --grain-light: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC40IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4zIi8+PC9zdmc+");

  /* ──────────────────────────────────────────────────────────────────────
     ui-kit engine compatibility shim
     Maps the canonical @0jea/ui-kit token vocabulary (--brand, --text-1..4,
     --surface*, atmosphere, radius) onto Lotus's existing warm palette so
     elements.js web components (built against the engine names) render
     correctly here. Pure additions — does NOT change any existing Lotus token,
     so current visuals are unaffected. Lotus = the engine's gold/warm "theme".
     ────────────────────────────────────────────────────────────────────── */

  /* Brand (Lotus theme = warm gold) */
  --brand:         var(--accent);        /* #c08c24 */
  --brand-dim:     var(--accent-dark);   /* pressed/hover */
  --brand-muted:   var(--accent-dark);   /* large dark tint */
  --brand-soft:    var(--accent-dim);    /* low-opacity fill */
  --brand-glow:    var(--accent-glow);
  --brand-border:  rgba(192, 140, 36, 0.35);

  /* Surfaces */
  --surface:       var(--bg-raised);
  --surface-2:     #342c27;              /* slightly lifted from --bg-raised */

  /* Text colour tiers (engine: 1=heading 2=body 3=muted 4=dim) */
  --text-1:        var(--text);
  --text-2:        var(--text-muted);
  --text-3:        var(--text-dim);
  --text-4:        var(--text-dark-secondary);
  --text-on-brand: var(--text-dark);     /* dark text on gold */

  /* Text sizes the engine names but Lotus lacks */
  --text-2xs:      0.69rem;
  --text-md:       var(--text-base);
  --text-display:  var(--text-5xl);

  /* Spacing steps the engine uses but Lotus lacks */
  --space-px:      1px;
  --space-0-5:     0.25rem;
  --space-5:       2.5rem;
  --space-7:       3.5rem;
  --space-20:      10rem;
  --space-24:      12rem;

  /* Radius scale (Lotus had none defined) */
  --radius-base:   8px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-full:   9999px;

  /* Atmosphere (engine names; sensible Lotus defaults) */
  --grain-opacity:   0.13;
  --grain-blend:     normal;   /* normal = current look; CMS can switch to overlay/soft-light */
  --grain-size:      180px;
  --bloom-opacity:   0;
  --bloom-spread:    65%;
  --bloom-x:         50%;
  --bloom-y:         60%;
  --bloom-radius:    60;
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-blur:      0px;
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --vignette-opacity: 0;
  --vignette-spread:  60%;
  --radius-card:      0px;

  /* Effects (CMS Effects panel; defaults = current flat look) */
  --shadow-card:   none;
  --heading-glow:  none;
  --nav-shadow:    none;
  --card-grain:    0;
  /* --btn-glow has no :root default — its fallback lives in buttons.css so the
     current accent hover glow is preserved when the CMS hasn't set it. */
}