/* ============================================================
   Goodman Auto — Design Tokens
   Direction: European luxury service center.
   Charcoal / black / silver with an automotive-red redline.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --carbon:        #0b0c0e;   /* deepest background        */
  --charcoal:      #16181c;   /* primary surface           */
  --graphite:      #1f2228;   /* raised surface / cards     */
  --graphite-2:    #2a2e36;   /* hairlines / borders        */
  --silver:        #c7ccd2;   /* metallic silver           */
  --silver-dim:    #8b929c;   /* muted silver              */
  --white:         #f5f7f9;
  --red:           #e11d2a;   /* automotive red accent     */
  --red-deep:      #b3141f;
  --red-glow:      rgba(225, 29, 42, 0.45);

  /* ---- Semantic (dark is the default identity) ---- */
  --bg:            var(--carbon);
  --bg-alt:        var(--charcoal);
  --surface:       var(--graphite);
  --surface-2:     #15171b;
  --border:        var(--graphite-2);
  --text:          var(--white);
  --text-muted:    var(--silver-dim);
  --text-soft:     var(--silver);
  --accent:        var(--red);
  --accent-deep:   var(--red-deep);
  --on-accent:     #ffffff;

  /* glass */
  --glass-bg:      rgba(22, 24, 28, 0.62);
  --glass-border:  rgba(199, 204, 210, 0.12);
  --glass-blur:    saturate(160%) blur(14px);

  /* ---- Type ---- */
  --font-display: 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-eyebrow:   0.78rem;
  --fs-small:     0.875rem;
  --fs-body:      1.02rem;
  --fs-lead:      1.18rem;
  --fs-h6:        1.05rem;
  --fs-h5:        1.3rem;
  --fs-h4:        1.6rem;
  --fs-h3:        clamp(1.6rem, 3vw, 2.1rem);
  --fs-h2:        clamp(2rem, 4.4vw, 3.1rem);
  --fs-h1:        clamp(2.6rem, 6.2vw, 4.6rem);

  --lh-tight:     1.04;
  --lh-snug:      1.22;
  --lh-body:      1.62;
  --track-wide:   0.22em;

  /* ---- Layout ---- */
  --maxw:         1200px;
  --maxw-narrow:  820px;
  --gutter:       clamp(1.1rem, 4vw, 2.5rem);
  --section-y:    clamp(3.5rem, 8vw, 6.5rem);

  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    22px;
  --radius-pill:  999px;

  /* ---- Elevation ---- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --shadow:       0 18px 40px -22px rgba(0,0,0,.85);
  --shadow-lg:    0 40px 80px -30px rgba(0,0,0,.9);
  --shadow-red:   0 14px 40px -14px var(--red-glow);

  /* ---- Motion ---- */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --t-fast:       160ms;
  --t:            300ms;
  --t-slow:       620ms;

  /* sticky bars */
  --header-h:     74px;

  color-scheme: dark;
}

/* ---------------- Light theme ---------------- */
:root[data-theme="light"] {
  --bg:          #f3f4f6;
  --bg-alt:      #ffffff;
  --surface:     #ffffff;
  --surface-2:   #eef0f3;
  --border:      #dfe2e7;
  --text:        #14161a;
  --text-muted:  #5c636e;
  --text-soft:   #353a42;
  --accent:      #cf1424;
  --accent-deep: #a30f1c;
  --on-accent:   #ffffff;

  --glass-bg:     rgba(255, 255, 255, 0.7);
  --glass-border: rgba(20, 22, 26, 0.08);

  --shadow-sm:   0 1px 2px rgba(20,22,26,.08);
  --shadow:      0 18px 40px -24px rgba(20,22,26,.28);
  --shadow-lg:   0 40px 80px -32px rgba(20,22,26,.32);
  --shadow-red:  0 14px 36px -16px rgba(207,20,36,.4);

  color-scheme: light;
}

/* Respect OS preference only if user hasn't chosen.
   main.js sets data-theme explicitly; this is the no-JS fallback. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg:#f3f4f6; --bg-alt:#fff; --surface:#fff; --surface-2:#eef0f3;
    --border:#dfe2e7; --text:#14161a; --text-muted:#5c636e; --text-soft:#353a42;
    --accent:#cf1424; --accent-deep:#a30f1c;
    --glass-bg:rgba(255,255,255,.7); --glass-border:rgba(20,22,26,.08);
    color-scheme: light;
  }
}