/* ============================================================
   Preppr — Color tokens
   Ink navy is structure. Teal is rare emphasis. White is air.
   ============================================================ */
:root {
  /* ---- Brand: Ink Navy (primary / structure) ---- */
  --navy-950: #08111c;
  --navy-900: #0d1b2a; /* core ink — primary brand */
  --navy-800: #13263a;
  --navy-700: #1b3450;
  --navy-600: #274764;
  --navy-500: #355d80;

  /* ---- Brand: Teal (accent / emphasis — use sparingly) ---- */
  --teal-700: #007e74;
  --teal-600: #009488;
  --teal-500: #00b4a6; /* core accent */
  --teal-400: #2fc9bd;
  --teal-300: #7adcd4;
  --teal-100: #c8efeb;
  --teal-50:  #e6f7f5;

  /* ---- Neutrals: cool grey ---- */
  --white:    #ffffff;
  --grey-50:  #f6f8fa; /* subtle cool surface */
  --grey-100: #eef1f4;
  --grey-200: #e2e7ec; /* hairline borders */
  --grey-300: #cdd6de;
  --grey-400: #9fadb9;
  --grey-500: #6c7c89;
  --grey-600: #4c5b68;
  --grey-700: #34424e;

  /* ---- Status (app surfaces) ---- */
  --green-500:  #1f9d6b;
  --green-50:   #e7f5ee;
  --amber-500:  #e09a2d;
  --amber-50:   #fbf1dd;
  --red-500:    #d9534f;
  --red-50:     #fbeae9;
  --blue-500:   #2f6fb0; /* info / link on light */
  --blue-50:    #e9f1f9;

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  /* Text */
  --text-strong:      var(--navy-900);
  --text-body:        var(--navy-700);
  --text-muted:       var(--grey-500);
  --text-on-dark:     var(--white);
  --text-on-dark-mut: rgba(255, 255, 255, 0.66);
  --text-accent:      var(--teal-600);

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-subtle:   var(--grey-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--grey-100);
  --surface-dark:     var(--navy-900);
  --surface-dark-2:   var(--navy-800);

  /* Accent */
  --accent:           var(--teal-500);
  --accent-hover:     var(--teal-600);
  --accent-press:     var(--teal-700);
  --accent-subtle:    var(--teal-50);
  --accent-on:        var(--white);

  /* Borders */
  --border-subtle:    var(--grey-200);
  --border-default:   var(--grey-300);
  --border-strong:    var(--grey-400);
  --border-on-dark:   rgba(255, 255, 255, 0.14);
  --border-accent:    var(--teal-500);

  /* Status semantic */
  --success:          var(--green-500);
  --success-subtle:   var(--green-50);
  --warning:          var(--amber-500);
  --warning-subtle:   var(--amber-50);
  --danger:           var(--red-500);
  --danger-subtle:    var(--red-50);
  --info:             var(--blue-500);
  --info-subtle:      var(--blue-50);

  /* Focus ring */
  --focus-ring:       rgba(0, 180, 166, 0.45);
}