/* ============================================================
   Go Auto — Color tokens
   Brand: orange (primary) + white, with slate/navy depth and
   blue as the optional third accent. Sampled from the logo:
   orange #F15B22, slate #21404C.
   ============================================================ */
:root {
  /* --- Orange (primary brand) --- */
  --orange-50:  #FEF2EC;
  --orange-100: #FCDFD0;
  --orange-200: #FAC0A3;
  --orange-300: #F79B70;
  --orange-400: #F47A45;
  --orange-500: #F15B22; /* brand orange */
  --orange-600: #DB480F;
  --orange-700: #B23A0C;
  --orange-800: #8A2D0A;
  --orange-900: #5E1F07;

  /* --- Slate / navy (secondary ink + dark surfaces) --- */
  --slate-50:  #F2F5F6;
  --slate-100: #E3E9EC;
  --slate-200: #C6D0D5;
  --slate-300: #9CACB4;
  --slate-400: #70858F;
  --slate-500: #4C6470;
  --slate-600: #324E5A;
  --slate-700: #21404C; /* brand slate / primary ink */
  --slate-800: #16323F;
  --slate-900: #0E2230; /* deep navy section background */

  /* --- Warm neutrals (paper + surfaces) --- */
  --white:      #FFFFFF;
  --paper:      #FCFBF9; /* warm off-white page */
  --sand-50:    #F6F5F2; /* card / muted surface (from site) */
  --sand-100:   #EFEDE7;
  --sand-200:   #E6E4DC; /* hairline borders on warm bg */
  --sand-300:   #D7D4CA;

  /* --- Blue (optional third accent) --- */
  --blue-50:   #E9F2FA;
  --blue-100:  #CFE4F4;
  --blue-300:  #6FB0E0;
  --blue-500:  #1B75BB; /* brand blue */
  --blue-600:  #155E96;
  --blue-700:  #10486F;

  /* --- Status --- */
  --green-100: #D8F0E0;
  --green-500: #2E9E5B;
  --green-600: #23824A;
  --amber-100: #FBEDCB;
  --amber-500: #E8A317;
  --amber-600: #C2860C;
  --red-100:   #F8D9D5;
  --red-500:   #D23B2E;
  --red-600:   #AE2D22;

  /* ===========================================================
     Semantic aliases — reference these in components
     =========================================================== */
  --color-primary:        var(--orange-500);
  --color-primary-hover:  var(--orange-600);
  --color-primary-active: var(--orange-700);
  --color-on-primary:     var(--white);
  --color-primary-soft:   var(--orange-50);

  --color-secondary:        var(--slate-700);
  --color-secondary-hover:  var(--slate-800);
  --color-on-secondary:     var(--white);

  --color-accent:        var(--blue-500);
  --color-accent-hover:  var(--blue-600);
  --color-accent-soft:   var(--blue-50);

  /* Text */
  --text-strong:  var(--slate-900);
  --text-heading: var(--slate-700);
  --text-body:    var(--slate-600);
  --text-muted:   var(--slate-400);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--slate-300);
  --text-link:    var(--orange-600);

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-muted:   var(--sand-50);
  --surface-sunken:  var(--sand-100);
  --surface-inverse: var(--slate-900);
  --surface-inverse-soft: var(--slate-800);

  /* Borders / lines */
  --border-default: var(--sand-200);
  --border-strong:  var(--slate-200);
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --accent-rule:    var(--orange-500); /* the signature thin orange divider */

  /* States */
  --focus-ring: rgba(241, 91, 34, 0.40);
  --overlay-scrim: rgba(14, 34, 48, 0.55);
}