/* ============================================================
   Spike Academy — Color tokens
   Built from the brand: spike orange #F19020, ink black, warm
   neutral grays, plus a small set of supporting accents pulled
   from the company presentation.
   ============================================================ */

:root {
  /* ---- Brand orange (primary) ---- */
  --orange-50:  #fef6ec;
  --orange-100: #fde7cb;
  --orange-200: #fbcf97;
  --orange-300: #f8b463;
  --orange-400: #f5a23e;
  --orange-500: #f19020;   /* ← core brand orange */
  --orange-600: #db7d12;
  --orange-700: #b4640f;
  --orange-800: #8a4d0f;
  --orange-900: #6b3d10;

  /* ---- Ink / warm neutral gray ramp ---- */
  --ink-950: #14110d;   /* near-black, warm */
  --ink-900: #1c1a16;
  --ink-800: #2c2a25;
  --ink-700: #45423b;
  --ink-600: #5f5b52;
  --ink-500: #7d786d;
  --ink-400: #a39d90;
  --ink-300: #c7c2b8;
  --ink-200: #e2ddd3;
  --ink-150: #ece8e0;
  --ink-100: #f4f1ea;
  --ink-50:  #faf8f3;
  --white:   #ffffff;
  --black:   #000000;   /* pure black — wordmark only */

  /* ---- Supporting accents (used sparingly, from deck) ---- */
  --teal-500:   #2f9c95;   /* "succes-cirkel" / context hub */
  --teal-50:    #e7f4f3;
  --plum-500:   #7a4f9e;   /* authoring / AI accents */
  --plum-50:    #f1ebf6;

  /* ---- Semantic feedback ---- */
  --success-500: #2e9e5b;
  --success-50:  #e8f5ec;
  --warning-500: #e0a400;
  --warning-50:  #fbf3da;
  --danger-500:  #d64545;
  --danger-50:   #fbeaea;
  --info-500:    #2f7dc4;
  --info-50:     #e8f1fa;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Brand */
  --brand:            var(--orange-500);
  --brand-hover:      var(--orange-600);
  --brand-active:     var(--orange-700);
  --brand-subtle:     var(--orange-100);
  --brand-tint:       var(--orange-50);
  --brand-contrast:   var(--white);   /* text/icon on brand fill */

  /* Text */
  --text-strong:      var(--ink-950);
  --text-body:        var(--ink-800);
  --text-muted:       var(--ink-600);
  --text-subtle:      var(--ink-500);
  --text-on-brand:    var(--white);
  --text-on-dark:     var(--ink-50);
  --text-link:        var(--orange-700);

  /* Surfaces */
  --surface-page:     var(--ink-50);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--ink-100);
  --surface-inverse:  var(--ink-950);
  --surface-brand:    var(--orange-500);
  --surface-tint:     var(--orange-50);

  /* Borders / dividers */
  --border-subtle:    var(--ink-150);
  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-brand:     var(--orange-500);
  --ring-focus:       var(--orange-400);
}