/* ============================================================
   Relay 2.0 — Color tokens
   Brand mark = a multicolor relay/running-track baton.
   Green is the primary brand color; purple / red / blue / gold
   are the "lane" accents pulled straight from the logo.
   Neutrals are cool-leaning and light — deliberately NOT beige.
   ============================================================ */

:root {
  /* ---- Brand: Relay Green (primary) ---- */
  --green-50:  #e9f9ef;
  --green-100: #c8f1d7;
  --green-200: #97e4b4;
  --green-300: #5fd389;
  --green-400: #34c46c;
  --green-500: #1bb755;  /* ← brand green, sampled from logo */
  --green-600: #149a47;
  --green-700: #117c3a;
  --green-800: #0f5f2e;
  --green-900: #0b4322;

  /* ---- Lane accents (from the baton) ---- */
  --purple-50:  #f8ecfc;  --purple-300: #d292e9;  --purple-500: #bc55dd;  --purple-600: #a23bc6;  --purple-700: #842ba3;
  --red-50:     #fdecec;  --red-300:    #f09a9a;  --red-500:    #e54a4a;  --red-600:    #cf3636;  --red-700:    #ab2a2a;
  --blue-50:    #eaf2ff;  --blue-300:   #93bdff;  --blue-500:   #3b8dff;  --blue-600:   #2570e0;  --blue-700:   #1a57b8;
  --gold-50:    #fef6e0;  --gold-300:   #f7da8a;  --gold-500:   #f0c43f;  --gold-600:   #d6a720;  --gold-700:   #ab8214;

  /* ---- Neutrals (cool, light, never beige) ---- */
  --white:    #ffffff;
  --gray-25:  #fafbfc;
  --gray-50:  #f4f6f7;
  --gray-100: #eceef1;
  --gray-200: #e1e4e8;
  --gray-300: #cdd2d8;
  --gray-400: #a8aeb6;
  --gray-500: #7d848d;
  --gray-600: #5b626b;
  --gray-700: #424850;
  --gray-800: #2a2f35;
  --gray-900: #181b1f;
  --ink:      #0c0e10;  /* near-black, used for wordmark + display text */

  /* ============================================================
     SEMANTIC ALIASES  — reach for these in product/UI work
     ============================================================ */

  /* Primary action */
  --color-primary:        var(--green-500);
  --color-primary-hover:  var(--green-600);
  --color-primary-active: var(--green-700);
  --color-primary-subtle: var(--green-50);
  --color-on-primary:     var(--white);

  /* Text */
  --text-primary:    var(--ink);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-500);
  --text-disabled:   var(--gray-400);
  --text-on-brand:   var(--white);
  --text-link:       var(--green-700);

  /* Surfaces */
  --surface-page:    var(--gray-50);   /* app/page background */
  --surface-card:    var(--white);     /* raised cards & panels */
  --surface-sunken:  var(--gray-100);  /* wells, table headers */
  --surface-hover:   var(--gray-50);   /* row / item hover */
  --surface-active:  var(--gray-100);
  --surface-inverse: var(--ink);

  /* Borders */
  --border-subtle:   var(--gray-100);
  --border-default:  var(--gray-200);
  --border-strong:   var(--gray-300);
  --border-focus:    var(--green-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green-500) 32%, transparent);

  /* Status — fill / text / subtle-bg / border */
  --success:        var(--green-600);  --success-bg: var(--green-50);  --success-border: var(--green-200);
  --danger:         var(--red-600);    --danger-bg:  var(--red-50);    --danger-border:  #f3b6b6;
  --warning:        var(--gold-700);   --warning-bg: var(--gold-50);   --warning-border: var(--gold-300);
  --info:           var(--blue-600);   --info-bg:    var(--blue-50);   --info-border:    var(--blue-300);
  --accent:         var(--purple-600); --accent-bg:  var(--purple-50); --accent-border:  var(--purple-300);
}