/* IMA: Color (v2)
   Official hierarchy (updated):
     1. PRIMARY  : cool neutrals: near-black ink on cool off-white / white.
     2. BRAND    : BLUE leads. Indigo (#4845D4) is the primary brand accent;
                    sky (#72BDFF) is its light companion. VIOLET (#5B3FA6)
                    supports: eyebrows, quote rules, secondary highlights.
     3. ACTION   : AMBER (#C4732A). Urgency / CTA only. Sparing.
   The brand gradient (sky → deep indigo) is an APP surface only: not site/slides.
   No green, no red as brand colour. `--critical` survives ONLY as a functional
   form-error state; there is no decorative green/red anywhere. */

:root {
  /* ---- Neutrals: cool ink → white ---- */
  --ink-950: #07080b;
  --ink-900: #101319;   /* cool near-black: dark-mode ground */
  --ink-800: #1a1e27;
  --ink-700: #2a2f3a;
  --ink-600: #454b58;
  --ink-500: #6b7280;
  --ink-400: #9199a6;
  --ink-300: #b9c0cb;
  --ink-200: #d6dbe3;
  --ink-100: #eaedf2;
  --black:   #000000;

  /* ---- Paper: cool off-white grounds ---- */
  --paper:      #f4f6f9;  /* cool off-white brand ground */
  --paper-dim:  #eaeef4;  /* recessed surface */
  --paper-deep: #dce2ec;  /* borders / dividers */
  --white:      #ffffff;

  /* ---- Indigo: PRIMARY brand accent (blue leads) ---- */
  --indigo-900: #16184f;  /* action hover / landing dark variant */
  --indigo-800: #202276;  /* deep brand indigo: THE interactive colour (--accent) & gradient dark stop */
  --indigo-700: #2d2f9a;
  --indigo-600: #4845d4;  /* vivid indigo: gradient/symbol companion (decorative) */
  --indigo-500: #6463e0;
  --indigo-400: #8483ea;
  --indigo-200: #c4c3f5;
  --indigo-100: #ededfc;

  /* ---- Sky: light-blue companion (gradient light stop) ---- */
  --sky-500: #4a9eef;
  --sky-400: #72bdff;   /* gradient light stop */
  --sky-300: #a5d4ff;
  --sky-200: #cfe6ff;
  --sky-100: #e8f2ff;

  /* ---- Violet: brand SUPPORT (eyebrows, quote rules) ---- */
  --violet-900: #2a1860;
  --violet-700: #4a2d8a;
  --violet-600: #5b3fa6;  /* official violet: --accent-2 */
  --violet-500: #7257c4;
  --violet-400: #9178d8;
  --violet-200: #c8bcee;
  --violet-100: #ece8f7;

  /* ---- Amber: the ACTION signal (CTA / urgency) ---- */
  --amber-700: #9a5018;
  --amber-600: #b06224;
  --amber-500: #c4732a;   /* official amber: --action */
  --amber-400: #d9904f;
  --amber-200: #f0d4b8;
  --amber-100: #f8ede0;

  /* ---- Functional (NOT brand): kept only for form/system states ---- */
  --warning:  #b06224;   /* amber-aligned */
  --critical: #a32c1c;   /* form-error only: never decorative */

  /* ---- Brand gradient: APP surfaces only (buttons, symbol, voice UI) ---- */
  --gradient-brand: linear-gradient(135deg, var(--sky-400) 0%, var(--indigo-800) 100%);
  --gradient-brand-vivid: linear-gradient(120deg, var(--sky-400) 0%, var(--indigo-600) 50%, var(--indigo-800) 100%);
  --gradient-symbol: linear-gradient(140deg, var(--indigo-400) 0%, var(--violet-600) 55%, var(--indigo-800) 100%);

  /* ---- Glass (liquid-glass overlays / buttons) ---- */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-rim:       rgba(255, 255, 255, 0.72);
  --glass-line:      rgba(16, 19, 25, 0.10);   /* hairline edge of glass over light */
  --glass-tint-brand:  rgba(72, 69, 212, 0.16);
  --glass-tint-violet: rgba(91, 63, 166, 0.16);
  --glass-tint-amber:  rgba(196, 115, 42, 0.18);

  /* ================= SEMANTIC ALIASES ================= */
  /* Surfaces: default theme is "paper" (cool light) */
  --bg-base:        var(--paper);
  --surface:        var(--white);
  --surface-sunken: var(--paper-dim);
  --surface-invert: var(--ink-900);

  /* Text */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-invert:  var(--white);
  --text-accent:  var(--indigo-800);

  /* Lines */
  --border:        var(--paper-deep);
  --border-strong: var(--ink-900);
  --divider:       var(--ink-200);

  /* Accent roles: deep INDIGO #202276 is THE interactive colour, VIOLET supports */
  --accent:          var(--indigo-800);
  --accent-hover:    var(--indigo-900);
  --accent-contrast: var(--white);
  --accent-2:        var(--violet-600);
  --accent-2-hover:  var(--violet-700);

  /* Action roles: AMBER, for CTA / urgency only */
  --action:          var(--amber-500);
  --action-hover:    var(--amber-600);
  --action-contrast: var(--white);

  /* Glass surface (context-neutral default) */
  --glass-surface: var(--glass-bg);
  --glass-border:  var(--glass-rim);

  /* Focus */
  --focus-ring: var(--indigo-600);
}

/* ================= DARK / "NIGHT" THEME ================= */
/* Cool ink ground, white text: strong dark mode (app default at night). */
[data-theme="ink"] {
  --bg-base:        var(--ink-900);
  --surface:        var(--ink-800);
  --surface-sunken: #0a0c10;
  --surface-invert: var(--white);

  --text-strong:  var(--white);
  --text-body:    var(--ink-200);
  --text-muted:   var(--ink-400);
  --text-faint:   var(--ink-500);
  --text-invert:  var(--ink-900);
  --text-accent:  var(--sky-400);

  --border:        var(--ink-700);
  --border-strong: var(--white);
  --divider:       var(--ink-700);

  --accent:          var(--indigo-500);
  --accent-hover:    var(--indigo-400);
  --accent-contrast: var(--white);
  --accent-2:        var(--violet-400);
  --accent-2-hover:  var(--violet-500);

  --action:          var(--amber-400);
  --action-hover:    var(--amber-500);
  --action-contrast: var(--ink-900);

  --glass-bg:        rgba(26, 30, 39, 0.55);
  --glass-bg-strong: rgba(26, 30, 39, 0.72);
  --glass-rim:       rgba(255, 255, 255, 0.16);
  --glass-line:      rgba(255, 255, 255, 0.10);
  --glass-surface:   rgba(26, 30, 39, 0.55);
  --glass-border:    rgba(255, 255, 255, 0.16);

  --focus-ring: var(--sky-400);
}