/* ===========================================================================
   Askraa — Color tokens
   Brand: pure black ink + a single confident orange (#F26722, sampled from the
   logo). Neutrals carry a faint warm cast so they sit naturally beside orange.
   =========================================================================== */
:root {
  /* ---- Brand orange (sampled #F26722) ---------------------------------- */
  --orange-50:  #FEF3EC;
  --orange-100: #FCE0D0;
  --orange-200: #F9C0A2;
  --orange-300: #F69D6E;
  --orange-400: #F4823F;
  --orange-500: #F26722;  /* brand */
  --orange-600: #E0530F;  /* hover / press */
  --orange-700: #B8420B;
  --orange-800: #8C3209;
  --orange-900: #5E2206;

  /* ---- Ink / warm-neutral ramp ----------------------------------------- */
  --black:      #000000;
  --ink-950:    #0A0A0A;
  --ink-900:    #141312;
  --ink-800:    #1F1D1B;
  --ink-700:    #2C2A27;
  --ink-600:    #44403B;
  --ink-500:    #6B645D;
  --ink-400:    #8F8880;
  --ink-300:    #B4ADA5;
  --ink-200:    #D6D0C9;
  --ink-150:    #E4DFD9;
  --ink-100:    #EFEBE6;
  --ink-50:     #F7F5F2;
  --white:      #FFFFFF;

  /* ---- Semantic status -------------------------------------------------- */
  --green-500:  #1F9D55;
  --green-50:   #E7F6EE;
  --red-500:    #E5484D;
  --red-50:     #FCEAEA;
  --amber-500:  #E0A000;
  --amber-50:   #FBF2D9;
  --blue-500:   #2A7DE1;
  --blue-50:    #E8F1FC;

  /* =======================================================================
     Semantic aliases — light surfaces (default)
     ======================================================================= */
  --bg-base:        var(--white);
  --bg-subtle:      var(--ink-50);
  --bg-muted:       var(--ink-100);
  --bg-inverse:     var(--ink-950);   /* dark "terminal" sections */

  --surface-card:       var(--white);
  --surface-card-subtle: var(--ink-50);
  --surface-inverse:    var(--ink-900);
  --surface-terminal:   #0C0B0A;

  --text-primary:   var(--ink-950);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-inverse:   var(--white);
  --text-on-accent: var(--white);
  --text-accent:    var(--orange-600);
  --text-link:      var(--orange-600);

  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-950);
  --border-accent:  var(--orange-500);

  --accent:          var(--orange-500);
  --accent-hover:    var(--orange-600);
  --accent-soft:     var(--orange-50);
  --accent-contrast: var(--white);

  --focus-ring:      var(--orange-500);

  /* status semantic */
  --success: var(--green-500);
  --danger:  var(--red-500);
  --warning: var(--amber-500);
  --info:    var(--blue-500);
}

/* ===========================================================================
   Dark scope — apply .on-dark (or data-theme="dark") to flip semantics for
   the black "terminal" sections the brand uses for contrast.
   =========================================================================== */
.on-dark,
[data-theme="dark"] {
  --bg-base:        var(--ink-950);
  --bg-subtle:      var(--ink-900);
  --bg-muted:       var(--ink-800);
  --bg-inverse:     var(--white);

  --surface-card:        var(--ink-900);
  --surface-card-subtle: var(--ink-800);
  --surface-inverse:     var(--white);

  --text-primary:   var(--white);
  --text-secondary: var(--ink-300);
  --text-muted:     var(--ink-400);
  --text-faint:     var(--ink-500);
  --text-inverse:   var(--ink-950);
  --text-accent:    var(--orange-400);
  --text-link:      var(--orange-400);

  --border-subtle:  var(--ink-800);
  --border-default: var(--ink-700);
  --border-strong:  var(--white);

  --accent-soft:    rgba(242, 103, 34, 0.14);
}