/* ============================================================
   Qabas Energy — Color Tokens
   Emerald + lime greens on a cool, green-tinted navy neutral
   ============================================================ */

:root {
  /* ---------- Primary · Qabas Emerald ---------- */
  --emerald-50:  #E9F9F0;
  --emerald-100: #C9F0DA;
  --emerald-200: #97E3BB;
  --emerald-300: #5FD199;
  --emerald-400: #2FBE78;
  --emerald-500: #12B265; /* core brand green */
  --emerald-600: #0A9A57;
  --emerald-700: #097E49;
  --emerald-800: #0B633B;
  --emerald-900: #0A4F31;

  /* ---------- Accent · Lime Spark ---------- */
  --lime-300: #ABED7E;
  --lime-400: #8DE25C;
  --lime-500: #6FD84A; /* brand lime (bolt tip) */
  --lime-600: #58C238;
  --lime-700: #44A028;

  /* ---------- Neutral · Ink (green-tinted navy) ---------- */
  --ink-950: #11121F;
  --ink-900: #191A2F; /* wordmark navy */
  --ink-800: #232639;
  --ink-700: #333851;
  --ink-600: #4A5069;
  --ink-500: #6B7186;
  --ink-400: #8C92A6;
  --ink-300: #B0B5C4;
  --ink-200: #D2D6E0;
  --ink-100: #E8EAF0;
  --ink-50:  #F4F5F9;
  --white:   #FFFFFF;

  /* ---------- Semantic hues ---------- */
  --amber-100: #FCEFD2;
  --amber-500: #F2A93B;
  --amber-700: #B97612;
  --red-100:   #FBE0E1;
  --red-500:   #E5484D;
  --red-700:   #B11E22;
  --blue-100:  #DCEBF8;
  --blue-500:  #3B82C4;
  --blue-700:  #1F5894;

  /* ============================================================
     SEMANTIC ALIASES  (use these in product/UI work)
     ============================================================ */

  /* Brand */
  --brand:            var(--emerald-500);
  --brand-strong:     var(--emerald-600);
  --brand-deep:       var(--emerald-700);
  --brand-accent:     var(--lime-500);
  --brand-on:         var(--white);

  /* Text */
  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-subtle:      var(--ink-400);
  --text-on-brand:    var(--white);
  --text-on-dark:     var(--ink-50);
  --text-link:        var(--emerald-700);

  /* Surfaces */
  --surface-page:     var(--ink-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--ink-100);
  --surface-inverse:  var(--ink-900);
  --surface-inverse-2:var(--ink-800);
  --surface-brand-soft: var(--emerald-50);

  /* Borders */
  --border-subtle:    var(--ink-100);
  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-brand:     var(--emerald-500);
  --border-focus:     var(--emerald-500);

  /* States */
  --state-success-fg: var(--emerald-700);
  --state-success-bg: var(--emerald-50);
  --state-warning-fg: var(--amber-700);
  --state-warning-bg: var(--amber-100);
  --state-danger-fg:  var(--red-700);
  --state-danger-bg:  var(--red-100);
  --state-info-fg:    var(--blue-700);
  --state-info-bg:    var(--blue-100);

  /* ---------- Gradients ---------- */
  --gradient-spark:   linear-gradient(155deg, #11B267 0%, #3FC85F 52%, #6FD84A 100%); /* @kind color */
  --gradient-spark-soft: linear-gradient(155deg, #E9F9F0 0%, #DDF6E0 100%); /* @kind color */
  --gradient-ink:     linear-gradient(160deg, #232639 0%, #11121F 100%); /* @kind color */
  --gradient-ink-emerald: linear-gradient(150deg, #0B633B 0%, #11121F 78%); /* @kind color */
}