/* Elevate Labs — Color tokens
   Source: Elevate Labs Brand Kit v01. Primary navy + warm orange, with a
   secondary "ascent" palette (yellow, rose, teal, peach) used as accents. */

:root {
  /* ---- Brand base palette ---- */
  --navy-900: #060628;   /* deepest — backgrounds, reverse surfaces */
  --navy-800: #0b0b45;   /* PRIMARY brand navy (logo ring + wordmark) */
  --navy-700: #18185f;
  --navy-600: #2a2a7a;
  --navy-500: #45458f;   /* muted navy for secondary text on light */

  --orange-600: #e6741c;
  --orange-500: #ff8d36;  /* PRIMARY accent orange (logo peaks + "LABS") */
  --orange-400: #ffa75f;
  --orange-200: #ffd9b8;

  /* ---- Secondary "ascent" accents ---- */
  --yellow-500: #f4d35e;
  --rose-500:   #da4167;
  --teal-500:   #258ea6;
  --teal-600:   #1d7488;
  --peach-300:  #f6d8ae;  /* warm tint — section washes, soft fills */

  /* ---- Neutrals (warm-leaning grays toward the navy) ---- */
  --white:    #ffffff;
  --paper:    #fbfaf7;   /* off-white page — slightly warm */
  --sand-50:  #f5f2ec;   /* soft warm panel */
  --gray-100: #ecebf0;
  --gray-200: #dcdbe4;
  --gray-300: #c3c2cf;
  --gray-400: #9897a8;
  --gray-500: #6f6e82;
  --gray-600: #4c4b60;
  --ink:      #15153a;   /* near-navy body ink */

  /* ---- Semantic: text ---- */
  --text-strong:   var(--navy-800);
  --text-body:     var(--ink);
  --text-muted:    var(--gray-500);
  --text-inverse:  var(--white);
  --text-accent:   var(--orange-600);
  --text-link:     var(--teal-600);

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--sand-50);
  --surface-inverse: var(--navy-800);
  --surface-wash:    var(--peach-300);

  /* ---- Semantic: borders & lines ---- */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--navy-800);
  --divider:        var(--gray-100);

  /* ---- Semantic: interactive (orange primary) ---- */
  --action:          var(--orange-500);
  --action-hover:    var(--orange-600);
  --action-text:     var(--navy-800);
  --action-ghost:    var(--navy-800);

  /* ---- Status ---- */
  --success: #2f8f5b;
  --warning: var(--yellow-500);
  --danger:  var(--rose-500);
  --info:    var(--teal-500);

  /* ---- Focus ring ---- */
  --focus-ring: color-mix(in srgb, var(--teal-500) 55%, transparent);
}