/* ============================================================
   GarageWiz Pricing Configurator — Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

:root{
  /* Brand */
  --teal:        #005F7A;   /* primary */
  --teal-700:    #00536B;
  --teal-800:    #014355;
  --teal-900:    #013646;
  --navy:        #002F3D;   /* sidebar / panels */
  --navy-deep:   #001E28;   /* dealer view */
  --yellow:      #F5E041;   /* accent */
  --yellow-600:  #E6CE1E;
  --yellow-700:  #C9B30C;
  --blue:        #00B1ED;   /* secondary */
  --blue-600:    #009BD0;
  --white:       #FFFFFF;

  /* Neutrals — cool, teal-tinted */
  --ink:         #08252F;   /* primary text on light */
  --ink-2:       #3D5862;   /* secondary text */
  --ink-3:       #6E858D;   /* muted */
  --paper:       #EEF3F4;   /* app background */
  --card:        #FFFFFF;
  --line:        #DCE6E8;   /* hairlines */
  --line-2:      #C6D5D8;
  --field:       #F4F8F9;

  /* Semantic */
  --good:        #1FA463;
  --good-bg:     #E4F5EC;
  --warn:        #E08A1E;
  --warn-bg:     #FCF0DC;
  --danger:      #D8453B;
  --danger-bg:   #FBE7E5;

  /* Type */
  --display: 'Fredoka', 'Arial', sans-serif;
  --body:    'Hanken Grotesk', 'Arial', sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Shadow */
  --sh-1: 0 1px 2px rgba(8,37,47,.06), 0 1px 3px rgba(8,37,47,.05);
  --sh-2: 0 2px 6px rgba(8,37,47,.07), 0 6px 18px rgba(8,37,47,.07);
  --sh-3: 0 8px 24px rgba(8,37,47,.10), 0 18px 48px rgba(8,37,47,.12);
  --sh-pop: 0 24px 64px rgba(1,30,40,.28);

  --ring: 0 0 0 4px rgba(0,177,237,.28);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:16px;
  line-height:1.45;
}
#root{ height:100%; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
::selection{ background:var(--yellow); color:var(--ink); }

/* Scrollbars */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:#B9CACE; border-radius:10px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#9DB2B7; background-clip:content-box; }

/* ---------- type helpers ---------- */
.display{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--body); font-weight:800; text-transform:uppercase;
  letter-spacing:.13em; font-size:12px; color:var(--blue);
}
.num{ font-variant-numeric:tabular-nums; }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display); font-weight:600;
  border:none; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; font-size:16px; line-height:1;
  transition:transform .08s ease, box-shadow .18s ease, background .18s ease, color .18s;
  white-space:nowrap; user-select:none;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--yellow); color:var(--ink); box-shadow:0 4px 0 var(--yellow-700); }
.btn-primary:hover{ background:#FBEA66; }
.btn-primary:active{ box-shadow:0 1px 0 var(--yellow-700); }
.btn-teal{ background:var(--teal); color:#fff; box-shadow:0 4px 0 var(--teal-900); }
.btn-teal:hover{ background:var(--teal-700); }
.btn-teal:active{ box-shadow:0 1px 0 var(--teal-900); }
.btn-ghost{ background:transparent; color:var(--teal); box-shadow:inset 0 0 0 2px var(--line-2); }
.btn-ghost:hover{ background:#fff; box-shadow:inset 0 0 0 2px var(--teal); }
.btn-dark{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25); }
.btn-dark:hover{ background:rgba(255,255,255,.2); }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-lg{ padding:17px 36px; font-size:19px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ---------- generic surfaces ---------- */
.card{ background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.hair{ border:1px solid var(--line); }

/* chips / badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--body); font-weight:800; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill);
}
.badge-pop{ background:var(--yellow); color:var(--ink); }
.badge-prem{ background:var(--blue); color:#fff; }
.badge-start{ background:#E4EEF0; color:var(--teal); }
.badge-order{ background:var(--warn-bg); color:#9A5B07; }
.badge-good{ background:var(--good-bg); color:#15784A; }

/* fade/slide animation utility */
@keyframes gw-rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes gw-pop{ from{ opacity:0; transform:scale(.96);} to{ opacity:1; transform:none;} }
@keyframes gw-slide-in{ from{ transform:translateX(100%);} to{ transform:none;} }
@keyframes gw-fade{ from{opacity:0;} to{opacity:1;} }
.rise{ animation:gw-rise .4s cubic-bezier(.2,.7,.2,1) both; }

/* utility */
.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap-6{ gap:6px;} .gap-8{ gap:8px;} .gap-12{ gap:12px;} .gap-16{ gap:16px;} .gap-24{ gap:24px;}
.grow{ flex:1; }
.muted{ color:var(--ink-3); }
.center{ display:flex; align-items:center; justify-content:center; }
.sr-hidden{ position:absolute; left:-9999px; }