/* ============================================================
   Bid Advisor — design tokens (single source of truth).
   Every component styles THROUGH these variables so the whole
   site stays consistent and both themes come for free.
   ============================================================ */

:root {
  /* Neutrals: cool, slight blue-grey bias (chosen, not default) */
  --paper:     #F6F7F9;
  --surface:   #FFFFFF;
  --surface-2: #FBFCFD;
  --ink:       #0E1116;
  --ink-2:     #363D4B;
  --muted:     #626B7A;
  --faint:     #9AA2AF;
  --line:      #E4E7EC;
  --line-2:    #D2D8E0;

  /* Brand accent: deep blue, used sparingly */
  --accent:      #2A43D0;
  --accent-2:    #1C2FA8;
  --accent-soft: #EDEFFB;
  --on-accent:   #FFFFFF;

  /* Functional / confidence (product UI only) */
  --good:      #1F9D57;
  --good-soft: #E7F4EC;
  --warn:      #B0791C;
  --warn-soft: #F7EFDD;
  --alert:     #C8402F;

  --shadow-sm: 0 1px 2px rgba(14,17,22,.05);
  --shadow-md: 0 2px 4px rgba(14,17,22,.04), 0 14px 34px -18px rgba(14,17,22,.20);

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-eyebrow: .72rem;
  --fs-micro:   .78rem;
  --fs-small:   .9rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.22rem;
  --fs-h3:      1.3rem;
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h1:      clamp(2.4rem, 6vw, 4.1rem);

  /* Marketing pages hold a readable measure; the signed-in app shell runs wide
     so data grids get the screen. */
  --maxw: 1180px;
  --maxw-app: 1760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0B0D11; --surface:#12151B; --surface-2:#171B22;
    --ink:#F2F4F7; --ink-2:#C6CCD6; --muted:#8B94A3; --faint:#5C6473;
    --line:#232935; --line-2:#303745;
    --accent:#6E82FF; --accent-2:#93A2FF; --accent-soft:#1A2140; --on-accent:#0B0D11;
    --good:#3FBE74; --good-soft:#12291D; --warn:#D6A64A; --warn-soft:#2A2312; --alert:#E9695A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 18px 40px -20px rgba(0,0,0,.7);
  }
}

/* Explicit toggle overrides OS preference, both directions */
:root[data-theme="light"] {
  --paper:#F6F7F9; --surface:#FFFFFF; --surface-2:#FBFCFD;
  --ink:#0E1116; --ink-2:#363D4B; --muted:#626B7A; --faint:#9AA2AF;
  --line:#E4E7EC; --line-2:#D2D8E0;
  --accent:#2A43D0; --accent-2:#1C2FA8; --accent-soft:#EDEFFB; --on-accent:#FFFFFF;
  --good:#1F9D57; --good-soft:#E7F4EC; --warn:#B0791C; --warn-soft:#F7EFDD; --alert:#C8402F;
  --shadow-sm:0 1px 2px rgba(14,17,22,.05);
  --shadow-md:0 2px 4px rgba(14,17,22,.04), 0 14px 34px -18px rgba(14,17,22,.20);
}
:root[data-theme="dark"] {
  --paper:#0B0D11; --surface:#12151B; --surface-2:#171B22;
  --ink:#F2F4F7; --ink-2:#C6CCD6; --muted:#8B94A3; --faint:#5C6473;
  --line:#232935; --line-2:#303745;
  --accent:#6E82FF; --accent-2:#93A2FF; --accent-soft:#1A2140; --on-accent:#0B0D11;
  --good:#3FBE74; --good-soft:#12291D; --warn:#D6A64A; --warn-soft:#2A2312; --alert:#E9695A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 4px rgba(0,0,0,.3), 0 18px 40px -20px rgba(0,0,0,.7);
}