/* ===========================================================================
   actual. — Color tokens
   Dark-first, warm-orange "spark" accent. Built for Arabic-first MENA SMB AI.
   =========================================================================== */

:root {
  /* --- Ink / near-black surfaces (the "night" canvas) ------------------- */
  --ink-950: #0a0a0d;   /* deepest — page void */
  --ink-900: #0b0b0f;   /* logo plate / base background */
  --ink-850: #0d0f13;   /* brand theme color / app shell */
  --ink-800: #14161c;   /* raised surface */
  --ink-700: #191c24;   /* card */
  --ink-600: #21242e;   /* elevated card / popover */
  --ink-500: #2b2f3a;   /* hairline-strong / input bg */
  --ink-400: #3a3f4d;   /* disabled fill */

  /* --- Spark (primary accent — the warm orange of the logo) ------------- */
  --spark-50:  #fff4ec;
  --spark-100: #ffe6d4;
  --spark-200: #ffd0ad;
  --spark-300: #ffba86;
  --spark-400: #ff9e57;  /* ★ brand primary — the logo stroke */
  --spark-500: #f7853a;
  --spark-600: #e16a23;
  --spark-700: #bb521a;
  --spark-800: #8f3d15;
  --spark-900: #5f2a10;

  /* --- Ember (deep complementary warm, for gradients/glow) -------------- */
  --ember-400: #ff7a59;
  --ember-500: #ef5d39;

  /* --- Neutral warm grays (text on dark) ------------------------------- */
  --warm-white: #f6f4f1;   /* primary text — warm, not pure white */
  --warm-200:   #d8d4cd;
  --warm-300:   #b4afa6;
  --warm-400:   #8b8780;
  --warm-500:   #66635d;

  /* --- Pure-ish white for light surfaces (builder canvas) -------------- */
  --paper: #ffffff;
  --paper-soft: #f7f6f3;
  --paper-line: #e9e6e0;

  /* --- Semantic ------------------------------------------------------- */
  --success-400: #4ec98a;
  --success-bg:  rgba(78, 201, 138, 0.12);
  --live-400:    #5fd3a0;   /* online / active status, two-tone accent */
  --live-bg:     rgba(95, 211, 160, 0.12);
  --warning-400: #f5c451;
  --warning-bg:  rgba(245, 196, 81, 0.12);
  --danger-400:  #f0685f;
  --danger-bg:   rgba(240, 104, 95, 0.12);
  --info-400:    #5aa9f0;
  --info-bg:     rgba(90, 169, 240, 0.12);

  /* --- Alpha hairlines / overlays (on dark) ---------------------------- */
  --line-soft:   rgba(246, 244, 241, 0.07);
  --line:        rgba(246, 244, 241, 0.11);
  --line-strong: rgba(246, 244, 241, 0.18);
  --overlay:     rgba(8, 8, 11, 0.66);

  /* =====================================================================
     SEMANTIC ALIASES — reach for these in components
     ===================================================================== */
  --bg-void:       var(--ink-950);
  --bg-base:       var(--ink-850);
  --bg-surface:    var(--ink-800);
  --bg-card:       var(--ink-700);
  --bg-elevated:   var(--ink-600);
  --bg-input:      var(--ink-500);

  --text-primary:   var(--warm-white);
  --text-secondary: var(--warm-300);
  --text-muted:     var(--warm-400);
  --text-faint:     var(--warm-500);
  --text-on-spark:  #2a1607;          /* dark ink on orange buttons */

  --accent:         var(--spark-400);
  --accent-hover:   var(--spark-300);
  --accent-press:   var(--spark-500);
  --accent-soft:    rgba(255, 158, 87, 0.13);
  --accent-line:    rgba(255, 158, 87, 0.30);

  --border-card:   var(--line);
  --border-input:  var(--line-strong);
  --focus-ring:    rgba(255, 158, 87, 0.55);
  --live:          var(--live-400);
}