/* DealersGO design tokens: one source for the website, the dashboard, admin and (copied) the extension.
   Light and friendly: white pages, a soft sky band, navy ink, logo blue for actions, rounded shapes.
   Font: Plus Jakarta Sans (loaded by each page), falling back to the system font.
   Browsers cache this file and site.css: after changing either, bump the ?v= on their <link> tags in every page. */
:root {
  --dg-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --dg-bg: #ffffff;          /* page */
  --dg-band: #eef3ff;        /* sky band behind product shots and alternating sections */
  --dg-card: #ffffff;
  --dg-card-2: #f6f8fd;      /* inset surfaces, table heads, inputs */
  --dg-ink: #122046;         /* text */
  --dg-muted: #5a6788;       /* secondary text */
  --dg-line: #dfe6f4;        /* borders */
  --dg-blue: #1d4ed8;        /* the logo blue: actions and links */
  --dg-blue-hover: #1840b5;
  --dg-blue-soft: #e6eeff;
  --dg-action: #1d4ed8;      /* filled buttons: white text stays readable in both themes */
  --dg-action-hover: #1840b5;
  --dg-danger-fill: #c53b3b;  /* red behind white text (count badges, Deny), readable in both themes */
  --dg-ok: #0f7451;          /* posted, sold, up */
  --dg-ok-soft: #e1f5ec;
  --dg-warn: #8a5300;        /* price changed, ageing */
  --dg-warn-soft: #fff1d6;
  --dg-danger: #c93636;      /* needs removal, errors */
  --dg-danger-soft: #fde8e8;

  --dg-r-sm: 10px;           /* inputs, chips */
  --dg-r: 14px;              /* buttons, cards */
  --dg-r-lg: 20px;           /* panels, product shots */
  --dg-shadow: 0 1px 2px rgba(18,32,70,.06), 0 12px 32px -20px rgba(18,32,70,.30);
  --dg-shadow-lift: 0 30px 60px -32px rgba(18,32,70,.45);
  --dg-focus: 0 0 0 3px rgba(29,78,216,.35);

  /* names the existing pages already use, pointed at the tokens above */
  --bg: var(--dg-bg); --card: var(--dg-card); --card-2: var(--dg-card-2);
  --ink: var(--dg-ink); --text: var(--dg-ink); --muted: var(--dg-muted); --border: var(--dg-line);
  --primary: var(--dg-blue); --soft: var(--dg-blue-soft); --primary-soft: var(--dg-blue-soft);
  --ok: var(--dg-ok); --ok-soft: var(--dg-ok-soft); --warn: var(--dg-warn); --warn-soft: var(--dg-warn-soft);
  --danger: var(--dg-danger); --danger-soft: var(--dg-danger-soft);
  --grad: linear-gradient(var(--dg-blue), var(--dg-blue));
  --dark: var(--dg-ink);
  --shadow: var(--dg-shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dg-bg: #0e1830; --dg-band: #12203d; --dg-card: #15233f; --dg-card-2: #1a2a4b;
    --dg-ink: #eef2fb; --dg-muted: #9eabc8; --dg-line: #26365a;
    --dg-blue: #6a95ff; --dg-blue-hover: #85a8ff; --dg-blue-soft: #1c2d57; --dg-action: #3a68ee; --dg-action-hover: #2f5bd9;
    --dg-ok: #3fc792; --dg-ok-soft: #133a30; --dg-warn: #f1b44a; --dg-warn-soft: #3a2c12;
    --dg-danger: #f07a7a; --dg-danger-soft: #3d1c22;
    --dg-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -20px rgba(0,0,0,.6);
    --dg-shadow-lift: 0 30px 60px -32px rgba(0,0,0,.7);
    --dark: #0a1226;
  }
}
:root[data-theme="dark"] {
  --dg-bg: #0e1830; --dg-band: #12203d; --dg-card: #15233f; --dg-card-2: #1a2a4b;
  --dg-ink: #eef2fb; --dg-muted: #9eabc8; --dg-line: #26365a;
  --dg-blue: #6a95ff; --dg-blue-hover: #85a8ff; --dg-blue-soft: #1c2d57; --dg-action: #3a68ee; --dg-action-hover: #2f5bd9;
  --dg-ok: #3fc792; --dg-ok-soft: #133a30; --dg-warn: #f1b44a; --dg-warn-soft: #3a2c12;
  --dg-danger: #f07a7a; --dg-danger-soft: #3d1c22;
  --dg-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -20px rgba(0,0,0,.6);
  --dg-shadow-lift: 0 30px 60px -32px rgba(0,0,0,.7);
  --dark: #0a1226;
}

/* The same names again, at a weight that beats a page's own light/dark blocks (the dashboard sets them on
   html[data-theme="dark"]): pages keep their CSS, the values come from here in both themes. */
:root:not(.dg-x) {
  --bg: var(--dg-bg); --card: var(--dg-card); --card-2: var(--dg-card-2);
  --ink: var(--dg-ink); --text: var(--dg-ink); --muted: var(--dg-muted); --border: var(--dg-line);
  --primary: var(--dg-blue); --soft: var(--dg-blue-soft); --primary-soft: var(--dg-blue-soft);
  --ok: var(--dg-ok); --ok-soft: var(--dg-ok-soft); --warn: var(--dg-warn); --warn-soft: var(--dg-warn-soft);
  --danger: var(--dg-danger); --danger-soft: var(--dg-danger-soft);
  --grad: linear-gradient(var(--dg-blue), var(--dg-blue));
  --shadow: var(--dg-shadow);
  /* dealer dashboard sidebar */
  --side: var(--dg-card-2); --side-ink: var(--dg-ink); --side-muted: var(--dg-muted); --side-link: var(--dg-muted);
  --side-hover: var(--dg-band); --side-active: var(--dg-blue-soft); --side-active-ink: var(--dg-blue);
  --side-line: var(--dg-line); --side-strong: var(--dg-ink);
}

/* Filled buttons and selected pills use the action blue: in dark mode the link blue is too light for white text. */
button.primary, .site-footer .cta, .toggle button.on, .tour-tabs button.active, .period button.active, .vcard .go { background: var(--dg-action); border-color: var(--dg-action); }
button.primary:hover { background: var(--dg-action-hover); border-color: var(--dg-action-hover); }

body { font-family: var(--dg-font); color: var(--dg-ink); background: var(--dg-bg); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { letter-spacing: -.025em; }
:focus-visible { outline: none; box-shadow: var(--dg-focus); border-radius: 6px; }
::selection { background: var(--dg-blue-soft); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }