/* ============================================================
   runut · Color Tokens
   ------------------------------------------------------------
   Two brand pillars:
   · Aubergine / plum  #59234B  — identity, depth, trust
   · Energy orange     #F7941D  — action, momentum, the "flag"
   Neutrals are warm-tinted (a whisper of plum) so they sit
   harmoniously with the brand rather than reading as cold UI
   gray. Semantic ramps are tuned warm to match.
   ============================================================ */

:root {
  /* ---- Brand: Aubergine / Plum ---- */
  --plum-50:  #f7eef4;
  --plum-100: #ebd6e3;
  --plum-200: #d6aec8;
  --plum-300: #b9809f;
  --plum-400: #8a4e78;
  --plum-500: #59234b;   /* ◆ brand base — matches wordmark */
  --plum-600: #4e1f42;
  --plum-700: #3f1936;
  --plum-800: #2d1227;
  --plum-900: #1e0c1a;
  --plum-950: #140810;

  /* ---- Brand: Energy Orange ---- */
  --orange-50:  #fef4e7;
  --orange-100: #fde3c2;
  --orange-200: #fbc987;
  --orange-300: #f9b154;
  --orange-400: #f8a132;
  --orange-500: #f7941d;   /* ◆ accent base — matches flag */
  --orange-600: #e27d0b;
  --orange-700: #bb6109;
  --orange-800: #934d0e;
  --orange-900: #783f10;

  /* ---- Neutrals (warm plum-tinted gray) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #faf8f9;
  --neutral-100: #f3eff2;
  --neutral-200: #e8e1e6;
  --neutral-300: #d5ccd1;
  --neutral-400: #aaa0a7;
  --neutral-500: #7d727a;
  --neutral-600: #5c535a;
  --neutral-700: #443e42;
  --neutral-800: #2c282b;
  --neutral-900: #1a171a;

  /* ---- Semantic ramps ---- */
  --success-50:  #e7f6ef;
  --success-100: #c2e9d7;
  --success-500: #18a06b;   /* achievement / on-track green */
  --success-600: #128658;
  --success-700: #0d6845;

  --danger-50:  #fdecec;
  --danger-100: #f9cfce;
  --danger-500: #dc3b3b;
  --danger-600: #c22d2d;
  --danger-700: #9d2222;

  --warning-50:  #fef3e0;
  --warning-100: #fcdfb0;
  --warning-500: #ee9e16;
  --warning-600: #cf8408;

  --info-50:  #e9f2fa;
  --info-100: #c6def2;
  --info-500: #3b82c4;
  --info-600: #2c6aa3;

  /* ============================================================
     SEMANTIC ALIASES — LIGHT (default)
     Reach for these in product code, not the raw ramps above.
     ============================================================ */

  /* Brand & accent */
  --brand:            var(--plum-500);
  --brand-strong:     var(--plum-700);
  --brand-soft:       var(--plum-50);
  --accent:           var(--orange-500);
  --accent-strong:    var(--orange-600);
  --accent-soft:      var(--orange-50);

  /* Surfaces */
  --surface-page:     var(--neutral-50);
  --surface-card:     var(--neutral-0);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-brand:    var(--plum-500);
  --surface-accent:   var(--orange-500);
  --surface-inverse:  var(--plum-900);

  /* Text */
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-muted:       var(--neutral-500);
  --text-disabled:    var(--neutral-400);
  --text-inverse:     var(--neutral-0);
  --text-brand:       var(--plum-500);
  --text-accent:      var(--orange-600);
  --text-on-brand:    var(--neutral-0);
  --text-on-accent:   var(--plum-900);

  /* Borders */
  --border-subtle:    var(--neutral-200);
  --border-default:   var(--neutral-300);
  --border-strong:    var(--neutral-400);
  --border-brand:     var(--plum-500);
  --border-accent:    var(--orange-500);

  /* Status (semantic) */
  --status-success:        var(--success-500);
  --status-success-surface:var(--success-50);
  --status-danger:         var(--danger-500);
  --status-danger-surface: var(--danger-50);
  --status-warning:        var(--warning-500);
  --status-warning-surface:var(--warning-50);
  --status-info:           var(--info-500);
  --status-info-surface:   var(--info-50);

  /* Focus ring */
  --focus-ring: var(--orange-500);

  /* Activity ring palette (fitness signature) */
  --ring-move:  var(--orange-500);
  --ring-pace:  var(--plum-500);
  --ring-goal:  var(--success-500);
}

/* ============================================================
   DARK THEME — built on the aubergine
   Apply via <html data-theme="dark"> or .theme-dark
   ============================================================ */

[data-theme="dark"], .theme-dark {
  --brand:            var(--plum-300);
  --brand-strong:     var(--plum-200);
  --brand-soft:       var(--plum-800);
  --accent:           var(--orange-500);
  --accent-strong:    var(--orange-400);
  --accent-soft:      rgba(247, 148, 29, 0.14);

  --surface-page:     var(--plum-950);
  --surface-card:     var(--plum-900);
  --surface-raised:   #271021;
  --surface-sunken:   var(--plum-950);
  --surface-brand:    var(--plum-500);
  --surface-accent:   var(--orange-500);
  --surface-inverse:  var(--neutral-50);

  --text-primary:     #f6eef3;
  --text-secondary:   #c9aebf;
  --text-muted:       #9a8190;
  --text-disabled:    #6c5862;
  --text-inverse:     var(--plum-900);
  --text-brand:       var(--plum-200);
  --text-accent:      var(--orange-400);
  --text-on-brand:    var(--neutral-0);
  --text-on-accent:   var(--plum-900);

  --border-subtle:    rgba(255, 255, 255, 0.08);
  --border-default:   rgba(255, 255, 255, 0.14);
  --border-strong:    rgba(255, 255, 255, 0.24);
  --border-brand:     var(--plum-300);
  --border-accent:    var(--orange-500);

  --status-success-surface: rgba(24, 160, 107, 0.16);
  --status-danger-surface:  rgba(220, 59, 59, 0.16);
  --status-warning-surface: rgba(238, 158, 22, 0.16);
  --status-info-surface:    rgba(59, 130, 196, 0.16);
}