/* =========================================================
   Lisseno Hi-Fi tokens · v3
   Palette: Mindful Palettes · "Champion"  (subtle application)
   White window + warm bone sidebar + deep forest accent.
   Type: Mona Sans (display/body), IBM Plex Mono (mono).
   ========================================================= */

:root {
  /* ─── Surfaces ─── */
  --bg:           #F0EEEB;            /* warm off-white window */
  --sidebar:      #E9E6E0;            /* soft warm bone — closer to original feeling */
  --sidebar-solid:#E9E6E0;            /* alias kept for consistency */
  --pad:          #E5E1DC;            /* hover fill on sidebar items */
  --pad-strong:   #D6CFCB;            /* active fill on sidebar items */
  --pad-press:    #C5BCB8;
  --surface:      #F0EEEB;            /* sentence blocks */
  --recess:       #EDEAE5;            /* very subtle recessed well inside cards */

  /* ─── Text ─── */
  --fg-1:        #10252A;
  --fg-2:        #4A565A;
  --fg-3:        #59676C;
  --fg-disabled: #A8B0B3;

  /* ─── Borders (rare, but with weight) ─── */
  --border:        rgba(16, 37, 42, 0.12);
  --border-strong: rgba(16, 37, 42, 0.22);
  --divider:       rgba(16, 37, 42, 0.10);

  /* ─── Primary button — Champion "Forest" ─── */
  --btn:        rgb(53, 94, 75);     /* deep forest green */
  --btn-hover:  rgb(42, 76, 60);
  --btn-press:  rgb(32, 60, 47);

  /* "Live" state — same green family, slightly brighter */
  --live: rgb(53, 94, 75);

  /* ─── Status colors ─── */
  --ok:          rgb(53, 94, 75);         /* same as --live; Ready / OK */
  --warn:        #E8C47A;                  /* soft amber — Connecting, Waiting, Output unavailable */
  --warn-strong: #9C7A2A;                  /* darker amber — popover button bg w/ white text */
  --err:         rgb(180, 60, 55);         /* muted brick red — Error, Permission missing, Key missing */
  --ok-soft:     rgba(53, 94, 75, 0.08);
  --warn-soft:   rgba(232, 196, 122, 0.25);
  --err-soft:    rgba(180, 60, 55, 0.08);
  --warn-edge:   rgba(232, 196, 122, 0.70);
  --err-edge:    rgba(180, 60, 55, 0.30);

  /* ─── Shadows · single-layer, light ─── */
  --shadow-card:
    0 0.5px 0 rgba(16,37,42,0.05),
    0 1px 2px rgba(16,37,42,0.04);
  --shadow-pop:
    0 0 0 0.5px rgba(16,37,42,0.10),
    0 10px 28px rgba(16,37,42,0.10);
  --shadow-window:
    0 0 0 0.5px rgba(16,37,42,0.14),
    0 18px 48px rgba(16,37,42,0.16);
  --shadow-btn:
    0 0.5px 0 rgba(16,37,42,0.30),
    0 6px 14px rgba(32,60,47,0.22),
    inset 0 0.5px 0 rgba(240,238,235,0.10);

  /* ─── Radii ─── */
  --r-button: 9px;
  --r-card:   12px;
  --r-pill:   8px;
  --r-side:   14px;
  --r-window: 12px;
  --r-round:  999px;

  /* ═══ Expanded Champion palette (additive · full muted triad) ═══
     The app uses a subtle slice; these expose the rest for marketing
     surfaces — section zones, mesh-gradient atmosphere, soft shapes. */
  --gold:        #E8C47A;            /* Golden Thread — warm accent */
  --gold-deep:   #C79A45;
  --violet:      #B9A5BD;            /* Viola Sororia — cool secondary */
  --violet-deep: #6E5A78;
  --forest:      #355E4B;            /* Wine Leaf — = --btn */
  --burnham:     #234537;            /* deep green — dark layering */
  --ink:         #10252A;            /* Sunken Ship — = --fg-1 */

  /* Section "zones" — bone washed toward each triad hue (barely-there) */
  --zone-bone:   #F0EEEB;
  --zone-gold:   #F4EDE0;
  --zone-violet: #EEEAEF;
  --zone-green:  #E7EDE9;

  /* Mesh-gradient orb fills — VERY soft, desaturated (atmosphere, not color washes) */
  --mesh-gold:   rgba(208,196,170,0.22);
  --mesh-violet: rgba(178,170,188,0.22);
  --mesh-green:  rgba(96,132,110,0.14);
  --mesh-burn:   rgba(35,69,55,0.40);

  /* ─── Type — distinctive display + refined body, mono only for code ─── */
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Mona Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

/* ─── Global polish ─── */
.lis-app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "calt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "cv11" 1;
}
.lis-app .num,
.lis-app .mono { font-variant-numeric: tabular-nums; }

.lis-app :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(53, 94, 75, 0.42);
  outline-offset: 3px;
}

/* ─── Subtle interaction animations ─── */
@keyframes lis-pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53,94,75,0.50); }
  60%      { box-shadow: 0 0 0 4px rgba(53,94,75,0); }
}
@keyframes lis-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,196,122,0.65); }
  60%      { box-shadow: 0 0 0 4px rgba(232,196,122,0); }
}
@keyframes lis-blink-err {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}
@keyframes lis-spin {
  to { transform: rotate(360deg); }
}
@keyframes lis-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lis-wave-bar {
  0%, 100% { transform: scaleY(0.30); }
  50%      { transform: scaleY(1.00); }
}
@keyframes lis-caret {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.15; }
}