/* CtrlSpace — Color System
   Cool near-black neutrals (slightly violet) + warm gold as the single accent.
   Source swatches:
     Dark  — #0f0f16 · #1c1b26 · #8e9096 · #ecebee · #c0a15e (gold)
     Light — #f8f7f9 · #ecebee · #8e9096 · #1c1b26 · #a8823f (gold) */
:root {
  /* Ink & surfaces — cool near-black ramp (dark scope) */
  --black: #08080c;
  --ink-900: #0f0f16;   /* deepest — source */
  --ink-800: #16151f;
  --ink-700: #1c1b26;   /* dark surface — source */
  --ink-600: #2a2935;
  --ink-500: #3a3947;

  /* Neutral ramp — cool stone / violet-gray */
  --gray-50:  #f8f7f9;  /* lightest bg — source */
  --gray-100: #ecebee;  /* light — source */
  --gray-200: #dcdbe0;
  --gray-300: #c4c3cb;
  --gray-400: #a8a8b0;
  --gray-500: #8e9096;  /* mid — source (shared border both modes) */
  --gray-600: #6f7077;
  --gray-650: #5e5f64;  /* light-mode secondary text (AA on pale canvas) */
  --gray-700: #55565d;
  --gray-800: #3a3a42;
  --gray-900: #232330;
  --white: #FFFFFF;
  --paper: #f8f7f9;     /* off-white app background */

  /* Signal — primary brand accent (gold; strong actions) */
  --signal-50:  #f4ecdb;
  --signal-100: #eaddc0;
  --signal-300: #d4bd8a;
  --signal-500: #a8823f;  /* base (light-mode gold) */
  --signal-600: #8a6a32;
  --signal-700: #6d5327;

  /* Pulse — "active / powered / live" tone (brighter gold) */
  --pulse-100: #eaddc0;
  --pulse-400: #d4bd8a;
  --pulse-500: #c0a15e;  /* base (dark-mode gold) */
  --pulse-600: #a8823f;

  /* Semantic */
  --success: #5b7f55;
  --warning: #b8863c;
  --danger:  #b14b3e;
  --info:    #8e9096;

  /* ---- Semantic aliases (light / default) ---- */
  --bg-app: var(--paper);          /* #F8F7F9 canvas */
  --bg-canvas: var(--gray-50);
  --surface-card: var(--gray-100); /* #ECEBEE panel */
  --surface-sunken: var(--gray-50);
  --surface-raised: var(--white);
  --surface-inverse: var(--ink-700);

  --text-strong: var(--ink-700);   /* #1C1B26 headings */
  --text-body: var(--ink-700);
  --text-muted: var(--gray-650);   /* #5E5F64 secondary — AA on pale */
  --text-faint: var(--gray-650);
  --text-on-accent: var(--white);
  --text-on-inverse: var(--gray-100);

  --border-subtle: var(--gray-300);
  --border-default: var(--gray-500); /* #8E9096 shared divider */
  --border-strong: var(--gray-500);
  --border-focus: var(--signal-500);

  --accent: var(--signal-500);     /* trim #A8823F */
  --accent-hover: var(--signal-600);
  --accent-press: var(--signal-700);
  --accent-soft: var(--signal-50);

  --active: var(--signal-500);
  --active-soft: var(--signal-50);

  /* Primary CTA — near-black-violet fill on light (never gold on pale) */
  --cta-fill: var(--ink-700);
  --cta-text: var(--paper);
}

/* Dark scope — device screens, hero panels, app dark mode.
   Apply with class="cs-dark" or [data-theme="dark"].
   Accent flips to brighter gold so it stays luminous on near-black. */
.cs-dark, [data-theme="dark"], [data-mode="dark"] {
  --bg-app: var(--ink-900);
  --bg-canvas: var(--ink-900);
  --surface-card: var(--ink-700);
  --surface-sunken: var(--ink-900);
  --surface-raised: var(--ink-600);
  --surface-inverse: var(--white);

  --text-strong: var(--gray-100);  /* #ECEBEE headings */
  --text-body: var(--gray-200);
  --text-muted: var(--gray-500);   /* #8E9096 secondary */
  --text-faint: var(--gray-500);
  --text-on-inverse: var(--ink-900);

  --border-subtle: var(--ink-600);
  --border-default: var(--gray-500); /* #8E9096 shared divider */
  --border-strong: var(--gray-500);

  --accent: var(--pulse-500);      /* trim #C0A15E */
  --accent-hover: var(--pulse-400);
  --accent-press: var(--pulse-600);
  --text-on-accent: var(--ink-900);
  --accent-soft: rgba(192,161,94,0.16);

  --active: var(--pulse-500);
  --active-soft: rgba(192,161,94,0.16);

  /* Primary CTA — gold fill on dark */
  --cta-fill: var(--pulse-500);
  --cta-text: var(--ink-900);
}