:root{
  /* ---------- Brand wordmark gradient (gold -> sage -> mint -> teal -> cyan) ---------- */
  --brand-gold:#e8c04f;
  --brand-sage:#b2bb8a;
  --brand-mint:#5ab2a0;
  --brand-teal:#21b2bd;
  --brand-cyan:#1cb8d8;
  --brand-gradient:linear-gradient(90deg,var(--brand-gold) 0%,var(--brand-sage) 30%,var(--brand-mint) 55%,var(--brand-teal) 78%,var(--brand-cyan) 100%);

  /* ---------- Product accent (studio buttons, switches, active states) ---------- */
  --accent-400:#6ed6fe;
  --accent-500:#32c5fd;   /* Save / Insert / Add Asset */
  --accent-600:#2abefe;
  --accent-700:#0d8ec2;
  --accent-wash:#0d3952;   /* accent at 18% on black - switch track, active pill */

  /* ---------- Chart theme: signals ---------- */
  --signal-positive:#00a4ed;
  --signal-negative:#eb5757;

  /* ---------- Chart theme: categorical palette (Eeagli theme, in order) ---------- */
  --series-1:#f5c84c;
  --series-2:#2cb7c4;
  --series-3:#f0f0f0;
  --series-4:#a8e0ff;
  --series-5:#eb5757;
  --series-6:#4da3ff;
  --series-7:#f2994a;
  --series-mint:#69c9a5;   /* line accent used in single-series renders */

  /* ---------- Dark scale (studio chrome + chart canvas) ---------- */
  --black:#000000;
  --ink-950:#0a0a0b;
  --ink-900:#0d0d0d;
  --ink-850:#101010;
  --ink-800:#11171f;
  --ink-750:#131418;
  --ink-700:#1a1d24;
  --ink-650:#1b1e25;
  --ink-600:#232a33;
  --ink-500:#2f3742;
  --navy-900:#1b2028;

  /* ---------- Light scale (media library, marketing body, light-mode charts) ---------- */
  --white:#ffffff;
  --paper-50:#fafcfe;
  --paper-100:#f4f6f8;
  --paper-200:#e8eff6;
  --paper-300:#e2e8ee;
  --paper-400:#cbd5df;
  --paper-500:#a0bfdd;

  /* ---------- Neutral text ---------- */
  --grey-400:#929292;
  --grey-500:#6b7280;
  --grey-700:#3f4650;

  /* ---------- Semantic aliases: dark surfaces (default studio mode) ---------- */
  --surface-app:var(--black);
  --surface-chrome:var(--ink-900);
  --surface-panel:var(--ink-800);
  --surface-control:var(--ink-700);
  --surface-control-hover:var(--ink-600);
  --surface-canvas:var(--black);
  --surface-overlay:rgba(0,0,0,.72);

  --text-primary:#ffffff;
  --text-secondary:rgba(255,255,255,.72);
  --text-muted:rgba(255,255,255,.48);
  --text-label:rgba(255,255,255,.56);
  --text-on-accent:#ffffff;
  --text-link:var(--accent-500);

  --border-subtle:rgba(255,255,255,.08);
  --border-default:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.24);
  --border-accent:var(--accent-600);

  /* ---------- Semantic aliases: light surfaces ---------- */
  --surface-light-app:var(--paper-100);
  --surface-light-panel:var(--white);
  --surface-light-card:var(--paper-50);
  --surface-light-selected:var(--paper-200);
  --surface-light-chrome:var(--navy-900);
  --text-light-primary:#0d0d0d;
  --text-light-secondary:var(--grey-700);
  --text-light-muted:var(--grey-500);
  --border-light-subtle:var(--paper-300);
  --border-light-selected:var(--paper-500);

  /* ---------- Chart-specific semantics ---------- */
  --chart-bg-dark:#000000;
  --chart-bg-light:#ffffff;
  --chart-ink:#ffffff;
  --chart-axis:rgba(255,255,255,.85);
  --chart-gridline:rgba(255,255,255,.28);
  --chart-baseline:#ffffff;
  --chart-annotation:#ffffff;
  --chart-safe-area:rgba(50,197,253,.55);
}

/* Light-mode chart canvas / light product surfaces opt in explicitly. */
.eeagli-light{
  --surface-app:var(--paper-100);
  --surface-chrome:var(--white);
  --surface-panel:var(--white);
  --surface-control:var(--paper-100);
  --surface-control-hover:var(--paper-200);
  --surface-canvas:var(--white);
  --text-primary:#0d0d0d;
  --text-secondary:var(--grey-700);
  --text-muted:var(--grey-500);
  --text-label:var(--grey-500);
  --border-subtle:var(--paper-300);
  --border-default:var(--paper-400);
  --border-strong:var(--paper-500);
  --chart-ink:#000000;
  --chart-axis:rgba(0,0,0,.85);
  --chart-gridline:rgba(0,0,0,.22);
  --chart-baseline:#000000;
}