/* ============================================================
   Shine Time — Color Tokens
   Sampled from the brand badge: azure blue wordmark (#1E8EF6),
   golden "DETAILING" (#FFDE00), white car, black badge field.
   ============================================================ */

:root {
  /* ---- Brand Blue (primary) — built around the azure wordmark ---- */
  --blue-50:  #e9f2fb;
  --blue-100: #cbdef2;   /* soft wash */
  --blue-200: #9ec3e6;   /* light ice-blue */
  --blue-300: #5e93cc;
  --blue-400: #1e8ef6;   /* THE wordmark azure — highlights, links on dark */
  --blue-500: #14609f;   /* mid */
  --blue-600: #114f97;   /* primary action (darker, premium) */
  --blue-700: #0d3d72;
  --blue-800: #0a2c50;
  --blue-900: #061a30;   /* deep night surface */

  /* ---- Accent Gold/Yellow — subtle, refined gold (not neon) ---- */
  --gold-100: #faf1d6;
  --gold-200: #f0e0ab;
  --gold-300: #e6cd78;
  --gold-400: #e3bf4a;   /* core accent — soft gold */
  --gold-500: #cba636;
  --gold-600: #a4831f;

  /* ---- Ink & cool neutrals (the gray field + black ticks) ---- */
  --white:        #ffffff;
  --neutral-50:  #f6f9fb;
  --neutral-100: #eef2f5;
  --neutral-200: #e0e6ec;
  --neutral-300: #c6ced7;
  --neutral-400: #9aa6b2;
  --neutral-500: #6d7b88;
  --neutral-600: #4e5a66;
  --neutral-700: #364250;
  --neutral-800: #212c38;
  --ink-900:     #0f1620;   /* near-black ink */

  /* ---- Semantic status ---- */
  --success-500: #1f9d57;
  --success-100: #d6f1e1;
  --danger-500:  #d23b35;
  --danger-100:  #fbdedc;
  --warning-500: #ebb800;  /* uses the brand gold */
  --warning-100: #fff1c2;
  --info-500:    #1c5e96;
  --info-100:    #cfe2f1;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */

  /* Surfaces */
  --color-bg:            var(--neutral-50);
  --surface-card:        var(--white);
  --surface-sunken:      var(--neutral-100);
  --surface-inverse:     var(--blue-900);
  --surface-brand:       var(--blue-600);
  --surface-brand-soft:  var(--blue-50);

  /* Text */
  --text-heading:  var(--ink-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-inverse:  var(--white);
  --text-on-brand: var(--white);
  --text-link:     var(--blue-500);

  /* Borders & lines */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--blue-200);

  /* Interactive — primary (blue) */
  --primary:        var(--blue-500);
  --primary-hover:  var(--blue-600);
  --primary-active: var(--blue-700);
  --on-primary:     var(--white);

  /* Interactive — accent (gold) */
  --accent:         var(--gold-400);
  --accent-hover:   var(--gold-500);
  --accent-active:  var(--gold-600);
  --on-accent:      var(--ink-900);

  /* Focus & feedback */
  --focus-ring:    var(--blue-400);
  --star:          var(--gold-400);
  --selection-bg:  var(--blue-100);
}