/* CarGPT design system. Every public CarGPT page links this file, so the site's type, colour,
   surfaces and motion are set here once.
   Public pages put class "cg" on <body> and get the shared header, buttons, labels, footer
   and the sign-in panel (add "cg-auth" for the centred form layout). A section with class
   "dark" switches to the ink theme. Console pages read the tokens only. CarChat pages do not
   link this file. */

:root{
  --cg-font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cg-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --cg-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Paper and ink, with one CarGPT violet used sparingly */
  --cg-paper:#f6f5f0;--cg-paper-raised:#fbfaf6;--cg-paper-sunk:#eeece5;--cg-sheet:#fffefb;
  --cg-ink:#1a1915;--cg-ink-2:#34322c;--cg-ink-muted:#605d55;--cg-ink-faint:#6b6860;
  --cg-rule:#e2e0d8;--cg-rule-2:#cfccc2;
  --cg-violet:#5b3fd0;--cg-violet-ink:#4a33b0;--cg-violet-tint:#ece8fb;--cg-violet-line:#c9bff2;
  --cg-night:#151411;--cg-night-raised:#1d1c18;--cg-night-ink:#f4f2ec;--cg-night-ink-2:#dedbd2;
  --cg-night-muted:#b3afa5;--cg-night-faint:#9a968c;--cg-night-rule:rgba(244,242,236,.12);--cg-night-rule-2:rgba(244,242,236,.22);
  --cg-night-violet:#b9adf5;
  --cg-green:#1f7a3e;--cg-green-dot:#2f9e57;--cg-amber:#8a5a00;--cg-red:#a3291c;

  /* Kept for console pages that read the older token names */
  --cg-violet-300:#c9bff2;--cg-violet-400:#8f7ce6;--cg-violet-500:#6d55d8;--cg-violet-600:#5b3fd0;--cg-violet-700:#4a33b0;
  --cg-green-400:#2f9e57;

  --cg-r-xs:6px;--cg-r-sm:8px;--cg-r:10px;--cg-r-lg:14px;--cg-r-xl:20px;
  --cg-shadow-sm:0 1px 2px rgba(26,25,21,.05),0 2px 8px -2px rgba(26,25,21,.06);
  --cg-shadow:0 1px 2px rgba(26,25,21,.04),0 12px 32px -12px rgba(26,25,21,.14);
  --cg-shadow-lg:0 2px 4px rgba(26,25,21,.04),0 24px 48px -16px rgba(26,25,21,.18),0 60px 120px -40px rgba(26,25,21,.22);
  --cg-ease:cubic-bezier(.2,.8,.2,1);
  --cg-wrap:1200px;
}

/* ---------- Public theme ---------- */
body.cg,.cg .dark{
  --page:var(--cg-paper);--raised:var(--cg-paper-raised);--card:var(--cg-sheet);--well:var(--cg-paper-sunk);
  --ink:var(--cg-ink);--ink-2:var(--cg-ink-2);--muted:var(--cg-ink-muted);--faint:var(--cg-ink-faint);
  --line:var(--cg-rule);--line-2:var(--cg-rule-2);
  --accent:var(--cg-violet);--accent-strong:var(--cg-violet-ink);--accent-tint:var(--cg-violet-tint);
  --ok:var(--cg-green);--warn:var(--cg-amber);--bad:var(--cg-red);--focus:var(--cg-violet);
  --btn-bg:var(--cg-ink);--btn-ink:var(--cg-paper);--btn-hover:#34322c;
}
.cg .dark{
  --page:var(--cg-night);--raised:var(--cg-night-raised);--card:var(--cg-night-raised);--well:#24231e;
  --ink:var(--cg-night-ink);--ink-2:var(--cg-night-ink-2);--muted:var(--cg-night-muted);--faint:var(--cg-night-faint);
  --line:var(--cg-night-rule);--line-2:var(--cg-night-rule-2);
  --accent:var(--cg-night-violet);--accent-strong:var(--cg-night-violet);--accent-tint:rgba(185,173,245,.12);
  --ok:#6fcf8f;--focus:var(--cg-night-violet);
  --btn-bg:var(--cg-night-ink);--btn-ink:var(--cg-night);--btn-hover:#fff;
  background:var(--page);color:var(--ink);color-scheme:dark;
}
body.cg{
  --head:var(--cg-font);--body:var(--cg-font);--font-head:var(--cg-font);--font-body:var(--cg-font);
  position:relative;margin:0;min-height:100vh;background:var(--page);color:var(--ink);color-scheme:light;
  font:400 16px/1.6 var(--cg-font);letter-spacing:-.011em;font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
.cg *,.cg *::before,.cg *::after{box-sizing:border-box}
.cg :where(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0;padding:0}
.cg :where(h1,h2,h3){font-family:var(--cg-font);font-weight:500;letter-spacing:-.04em;text-wrap:balance;color:var(--ink)}
.cg :where(p,li){text-wrap:pretty}
.cg img{display:block;max-width:100%}
.cg :where(a){color:inherit}
.cg ::selection{background:var(--cg-violet-tint);color:var(--cg-ink)}
.cg :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.cg [hidden]{display:none!important}
.cg .wrap{width:100%;max-width:var(--cg-wrap);margin:0 auto;padding:0 28px}

/* Accent words: one phrase per headline, set in the serif italic */
.cg .u{font-family:var(--cg-serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:inherit}
.cg .u.v{color:var(--accent)}
.cg .bm span,.cg .fm span{color:var(--accent)}

/* Section label: monospaced, an optional index, a small square */
.cg .lbl{display:inline-flex;align-items:center;gap:10px;font:500 11.5px/1.2 var(--cg-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cg .lbl::before{content:"";width:7px;height:7px;background:var(--accent)}
.cg .lbl.grey::before{background:var(--line-2)}
.cg .lbl b{font-weight:500;color:var(--ink)}

/* ---------- Buttons ---------- */
.cg .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;
  border:1px solid var(--btn-bg);border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);
  font:500 14.5px/1 var(--cg-font);letter-spacing:-.01em;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .18s var(--cg-ease)}
.cg .btn:not(:disabled):hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.cg .btn:not(:disabled):active{transform:scale(.98)}
.cg .btn.alt{background:transparent;color:var(--ink);border-color:var(--line-2)}
.cg .btn.alt:not(:disabled):hover{background:var(--well);border-color:var(--line-2)}
.cg .btn.violet{background:var(--cg-violet);border-color:var(--cg-violet);color:#fff}
.cg .btn.violet:not(:disabled):hover{background:var(--cg-violet-ink);border-color:var(--cg-violet-ink)}
.cg .btn.sm{height:34px;padding:0 14px;font-size:13.5px}
.cg .btn.lg{height:50px;padding:0 24px;font-size:15.5px}
.cg .btn.wide{width:100%}
.cg .btn.light{background:var(--cg-night-ink);border-color:var(--cg-night-ink);color:var(--cg-night)}
.cg .btn:disabled{opacity:.5;cursor:default}
.cg .btn .arr{transition:transform .2s var(--cg-ease)}
.cg .btn:hover .arr{transform:translateX(3px)}

/* ---------- Header ---------- */
.cg .nav{position:sticky;top:0;z-index:60;background:rgba(246,245,240,.82);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.cg .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.cg .brand{display:flex;align-items:center;gap:12px;min-width:0;min-height:44px;color:var(--ink);text-decoration:none}
.cg .brand .bm{font:600 19px/1 var(--cg-font);letter-spacing:-.045em;text-transform:none;white-space:nowrap}
.cg .brand .bt{padding-left:12px;border-left:1px solid var(--line-2);font:400 11.5px/1.25 var(--cg-mono);letter-spacing:.02em;text-transform:none;color:var(--faint);max-width:none;white-space:nowrap}
.cg .nav nav{display:flex;align-items:center;gap:4px}
.cg .nav nav a.t{padding:8px 11px;border-radius:999px;font:450 14px/1 var(--cg-font);letter-spacing:-.005em;text-transform:none;color:var(--muted);text-decoration:none;transition:color .15s,background .15s}
.cg .nav nav a.t:hover{color:var(--ink);background:var(--well)}
.cg .nav nav a.t[aria-current=page]{color:var(--ink);background:var(--well)}
.cg .nav nav .btn{margin-left:8px}
.cg .nav nav .btn + .btn{margin-left:2px}

/* ---------- Footer ---------- */
.cg footer{position:relative;border-top:1px solid var(--line);background:var(--page);color:var(--faint);padding:32px 0 44px}
.cg footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font:400 12.5px/1.6 var(--cg-mono);letter-spacing:0;text-transform:none}
.cg footer .fm{font:600 16px/1 var(--cg-font);letter-spacing:-.045em;color:var(--ink)}
.cg footer a{color:var(--muted);text-decoration:none;transition:color .15s}
.cg footer a:hover{color:var(--ink)}

/* ---------- Sheet (class "glass" kept for existing markup) ---------- */
.cg .glass{position:relative;border:1px solid var(--line);border-radius:var(--cg-r-xl);background:var(--card);box-shadow:var(--cg-shadow)}
.cg .spot{position:relative}

/* ---------- Sign-in panel (login, signup, reset, welcome) ---------- */
body.cg-auth{display:flex;flex-direction:column}
.cg-auth main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:80px 24px 96px}
.cg .panel{width:100%;max-width:440px}
.cg .panel > .lbl{display:flex;justify-content:center}
.cg .panel h1{margin:16px 0 10px;text-align:center;font-size:40px;line-height:1.05;letter-spacing:-.045em;text-transform:none}
.cg .panel .sub{margin:0 0 30px;text-align:center;font-size:15.5px;color:var(--muted)}
.cg .panel .sub a{color:var(--accent-strong);font-weight:500}
.cg .panel .card{position:relative;padding:30px;border:1px solid var(--line);border-radius:var(--cg-r-xl);background:var(--card);box-shadow:var(--cg-shadow)}
.cg .panel label{display:block;margin:0 0 7px;font:500 13.5px/1.3 var(--cg-font);letter-spacing:-.005em;text-transform:none;color:var(--ink-2)}
.cg .panel input:not([type=checkbox]):not([type=radio]),.cg .panel textarea,.cg .panel select{width:100%;height:44px;margin:0 0 18px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:var(--cg-r);background:#fff;color:var(--ink);
  font:400 15px/1.2 var(--cg-font);letter-spacing:-.005em;transition:border-color .15s,box-shadow .15s}
.cg .panel input:not([type=checkbox]):hover{border-color:#b9b5aa}
.cg .panel input:not([type=checkbox]):focus{outline:none;border-color:var(--cg-violet);box-shadow:0 0 0 3px rgba(91,63,208,.16)}
.cg .panel input::placeholder{color:var(--faint)}
.cg .panel input:not([type=checkbox]):not([type=radio]):disabled{color:var(--muted);background:var(--well);border-color:var(--line);cursor:not-allowed}
.cg .panel input[type=checkbox]{width:16px;height:16px;margin:0;flex-shrink:0;accent-color:var(--cg-ink)}
.cg .pw-wrap{position:relative;margin-bottom:18px}
.cg .pw-wrap input{margin-bottom:0!important;padding-right:48px!important}
.cg .pw-toggle{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:0;border-radius:var(--cg-r);background:transparent;color:var(--faint);cursor:pointer}
.cg .pw-toggle:hover{color:var(--ink)}
.cg .pw-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.cg .pw-toggle[aria-pressed=true]{color:var(--accent-strong)}
.cg .pw-toggle .eye-off,.cg .pw-toggle[aria-pressed=true] .eye-on{display:none}
.cg .pw-toggle[aria-pressed=true] .eye-off{display:block}
.cg .panel .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 20px}
.cg .panel .remember{display:flex;align-items:center;gap:9px;min-height:24px;margin:0;cursor:pointer;font:450 13.5px/1.3 var(--cg-font);color:var(--ink-2)}
.cg .panel .row a{display:inline-flex;align-items:center;min-height:24px;font:450 13.5px/1.3 var(--cg-font);color:var(--muted);text-decoration:none;text-transform:none;letter-spacing:0}
.cg .panel .row a:hover{color:var(--ink)}
.cg .panel .error{display:none;margin:0 0 16px;padding:10px 13px;border:1px solid #efc9c2;border-radius:var(--cg-r);background:#fbefec;color:var(--cg-red);font-size:13.5px}
.cg .panel .error.show{display:block}
.cg .panel .fine{margin-top:18px;text-align:center;font:400 12px/1.6 var(--cg-mono);letter-spacing:0;text-transform:none;color:var(--faint)}
.cg .alt-link{margin-top:24px;text-align:center;font-size:14px;color:var(--muted)}
.cg .alt-link a{color:var(--accent-strong);font-weight:500;text-decoration:none}
.cg .alt-link a:hover{color:var(--ink)}

/* ---------- Motion ---------- */
@keyframes cg-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .cg .rise{animation:cg-rise .7s var(--cg-ease) both}
  .cg .rise.d1{animation-delay:.06s}.cg .rise.d2{animation-delay:.12s}.cg .rise.d3{animation-delay:.18s}.cg .rise.d4{animation-delay:.24s}
}
@media (prefers-reduced-motion:reduce){.cg *,.cg *::before,.cg *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

@media (max-width:1080px){
  .cg .brand .bt{display:none}
}
@media (max-width:860px){
  .cg .nav nav a.t{display:none}
}
@media (max-width:620px){
  .cg .wrap{padding:0 18px}
  .cg .nav .wrap{height:58px}
  .cg .nav nav a[href="/login"]{display:none}
  .cg-auth main{padding:48px 18px 64px}
  .cg .panel h1{font-size:32px}
  .cg .panel .card{padding:24px 20px}
}