/* ============================================================
   HUMOTIX — Design Tokens
   The single source of truth for the visual language.

   THEME: "Lamplight" — the site is warm alabaster with dark text.
   ONE cinematic dark moment (the hero photograph, and the live
   dashboard band) is scoped with .theme-dark, which re-points the
   same tokens at their night values. Everything else inherits.

   The accent is the lamp: its METAL (brass) on light surfaces, its
   LIGHT (lit gold) on dark ones. Same hue (~37°) both times, only
   the value moves — so it reads as one colour in two lighting
   conditions, not two colours.

   THE ONE RULE: green has exactly ONE job — ASORA'S PRESENCE.
     --orb-lit / --orb-ring, the lit core of her chat orbs. Green
     there means "she is alive and answering"; the orb's body stays
     brass so it sits inside the lamplight family instead of fighting
     it. (The logo used to be the second green job; it is now
     ink + a brass node — a cool emerald was the one cool colour on a
     warm site and read as a different brand. See .mark.)

   Anywhere else, green is a bug — almost certainly a leftover from
   the pre-Lamplight theme. Buttons, tiles, links, borders, LEDs,
   status pills, progress fills and the LOGO are ALL brass/ink.
   ============================================================ */
:root{
  /* — Core palette (light) — */
  --bg:#F4F1EA; --bg-2:#EBE7DE; --panel:#FFFFFF; --panel-2:#FAF8F3;
  /* The page's own ground, deliberately NOT re-pointed by .theme-dark. Use it
     when something inside a night band has to blend back into the light page
     (e.g. the hero scrim's bottom edge) — --bg there is night, not alabaster. */
  --page-bg:#F4F1EA;
  --ink:#1A1713; --ink-soft:#5C564D; --ink-faint:#8C8579;
  --line:rgba(26,23,19,.10); --line-2:rgba(26,23,19,.17);

  /* — The lamp's metal: the accent on light surfaces — */
  --ember:#8F6F3E; --ember-soft:#A8834A; --ember-deep:#6B5230;
  --glow:rgba(143,111,62,.22);

  /* — Semantic — no green: "live" is brass on light, candle on dark — */
  --green:#8F6F3E; --green-soft:#A8834A; --red:#C5503F; --amber:#B7791F;

  /* — ASORA'S PRESENCE. The only green on the site: the lit core of her
     chat orb. Deliberately a soft, desaturated green so it reads as a living
     thing lit by the lamp rather than a second brand colour. Used ONLY by her
     orbs (.asora-orb, .lp-chat-orb, .lpw-orb, .pillar-lead .p-ic). — */
  --orb-lit:#7CC6A5; --orb-ring:rgba(46,125,91,.14);

  --glass:rgba(255,255,255,.72); --glass-line:rgba(26,23,19,.10);
  /* Trough behind any filled bar (confidence, pipeline, trend). A token, not a
     literal, because these sit inside bands that flip to night. */
  --track:rgba(26,23,19,.08);
  /* The halo on every pulsing "live" dot (ledPulse / emberPulse in motion.css,
     31 elements site-wide). A token because those keyframes are shared and must
     read correctly on both the alabaster page and the night hero. */
  --pulse:rgba(143,111,62,.45);
  /* Tinted accent surfaces — icon tiles, status pills, "on" states. Prefer these
     over a hardcoded rgba(): they flip correctly on the night bands, which a
     literal cannot. */
  --accent-fill:rgba(143,111,62,.13); --accent-line:rgba(143,111,62,.28);

  /* — Product canvas — the warm frame behind real product surfaces — */
  --product-canvas:
    radial-gradient(75% 130% at 0% 45%,rgba(168,131,74,.20),transparent 62%),
    radial-gradient(70% 130% at 100% 40%,rgba(233,216,180,.42),transparent 62%),
    radial-gradient(85% 110% at 100% 100%,rgba(143,111,62,.14),transparent 66%),
    linear-gradient(155deg,#F6F2E9,#EAE4D7);

  /* — Film grain — texture that stops flat CSS looking flat — */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* — Radii — */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:100px;

  /* — Layout — */
  --maxw:1200px;
  --gutter:clamp(20px,5vw,30px);

  /* — Spacing scale — */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px;
  --s-6:30px; --s-7:44px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* — Typography — */
  --font-sans:'Space Grotesk',system-ui,sans-serif;
  --font-serif:'Instrument Serif',serif;
  --font-mono:'JetBrains Mono',monospace;

  /* — Elevation (soft, for a light theme) — */
  --shadow-1:0 8px 24px -14px rgba(26,23,19,.16);
  --shadow-2:0 20px 50px -28px rgba(26,23,19,.20),inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-3:0 40px 90px -46px rgba(26,23,19,.24),0 0 0 1px rgba(26,23,19,.04),inset 0 1px 0 rgba(255,255,255,.8);
  --shadow-glow:0 12px 36px -12px var(--glow);

  /* — Motion — */
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.25s; --t-med:.4s; --t-slow:.7s;

  /* — Z-index scale — */
  --z-ambient:0; --z-base:1; --z-raised:2; --z-nav:50; --z-overlay:80; --z-toast:90;
}

/* ============================================================
   NIGHT — scoped to the cinematic bands only (the hero photo and
   the live dashboard). Re-points the same tokens, so every
   component inside simply works without bespoke dark CSS.
   ============================================================ */
.theme-dark{
  --bg:#0A0908; --bg-2:#12100E; --panel:#16130F; --panel-2:#1C1814;
  --ink:#F2EFEA; --ink-soft:#AFA79C; --ink-faint:#7E776C;
  --line:rgba(242,239,234,.10); --line-2:rgba(242,239,234,.18);
  /* The lamp's LIGHT — same hue as the brass above (~37°), lifted in value so
     it reads on night. It was #EFDDBE, but at 84% lightness that is a warm
     off-white, not gold: the hero looked cream while the rest of the site
     looked brass, and the two read as different colours rather than one lamp
     in two lighting conditions. 67% keeps them recognisably the same gold and
     still clears 10:1 on --bg. */
  --ember:#C89C60; --ember-soft:#D9B27B; --ember-deep:#A47F4B;
  --glow:rgba(200,156,96,.30);
  --green:#C89C60; --green-soft:#D9B27B;
  --glass:rgba(242,239,234,.055); --glass-line:rgba(242,239,234,.14);
  --track:rgba(242,239,234,.12);
  --pulse:rgba(200,156,96,.5);
  --accent-fill:rgba(200,156,96,.12); --accent-line:rgba(200,156,96,.26);
  --product-canvas:
    radial-gradient(85% 70% at 12% 112%,rgba(200,156,96,.16),transparent 60%),
    radial-gradient(60% 50% at 88% -10%,rgba(200,156,96,.07),transparent 62%),
    linear-gradient(168deg,#14110E 0%,#0F0D0B 60%,#0B0A09 100%);
  --shadow-1:0 12px 30px -18px rgba(0,0,0,.75);
  --shadow-2:0 28px 60px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(242,239,234,.07);
  --shadow-3:0 50px 100px -44px rgba(0,0,0,.9),inset 0 1px 0 rgba(242,239,234,.10);
  color:var(--ink);
  background:var(--bg);
}