/* ==========================================================================
   AUTOMOTION by P&P Group — Design Tokens
   Single source of truth. Never hardcode a colour, size or duration anywhere else.
   ========================================================================== */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --am-bg:            #070909;
  --am-panel:         #0D100F;
  --am-carbon:        #101412;
  --am-graphite:      #151918;
  --am-elevated:      #1B201E;

  /* ---- Lines ------------------------------------------------------------- */
  --am-border:        #2A302D;
  --am-border-soft:   #1D2321;
  --am-border-strong: #3A423E;

  /* ---- Brand ------------------------------------------------------------- */
  --am-green:         #1F8F4E;   /* metallic green — states, indicators   */
  --am-green-action:  #35B768;   /* emerald — primary CTA only            */
  --am-green-dim:     rgba(31, 143, 78, 0.14);
  --am-green-line:    rgba(31, 143, 78, 0.38);

  /* ---- Text -------------------------------------------------------------- */
  --am-text:          #F4F6F4;
  --am-text-2:        #A5AEA8;
  --am-muted:         #747E78;
  --am-on-action:     #05140B;

  /* ---- Status ------------------------------------------------------------ */
  --am-verified:      #35B768;
  --am-stated:        #C9A227;
  --am-pending:       #8C948F;
  --am-unavailable:   #5C6560;
  --am-danger:        #C4453C;

  /* ---- Typography -------------------------------------------------------- */
  --am-font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --am-font-ui:      "Inter", "Helvetica Neue", Arial, sans-serif;

  --am-fs-display:   clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
  --am-fs-h2:        clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --am-fs-h3:        1.0625rem;
  --am-fs-body:      0.9375rem;
  --am-fs-sm:        0.8125rem;
  --am-fs-xs:        0.6875rem;

  --am-lh-tight:     1.15;
  --am-lh-body:      1.6;

  --am-track-label:  0.09em;   /* uppercase micro labels */
  --am-track-brand:  0.14em;

  /* ---- Space (4px base) --------------------------------------------------- */
  --am-1:  4px;
  --am-2:  8px;
  --am-3:  12px;
  --am-4:  16px;
  --am-5:  20px;
  --am-6:  24px;
  --am-8:  32px;
  --am-10: 40px;
  --am-12: 48px;
  --am-16: 64px;
  --am-20: 80px;

  /* ---- Radius (premium, not bubbly) -------------------------------------- */
  --am-r-sm:  6px;
  --am-r:     10px;
  --am-r-lg:  14px;
  --am-r-pill: 999px;

  /* ---- Elevation --------------------------------------------------------- */
  --am-shadow:      0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --am-shadow-lift: 0 2px 6px rgba(0,0,0,.55), 0 18px 48px rgba(0,0,0,.5);

  /* ---- Motion ------------------------------------------------------------ */
  --am-dur-fast: 150ms;
  --am-dur:      200ms;
  --am-dur-slow: 250ms;
  --am-ease:     cubic-bezier(.22,.61,.36,1);

  /* ---- Layout ------------------------------------------------------------ */
  --am-max:        1360px;
  --am-gutter:     var(--am-4);
  --am-bar-h:      56px;   /* brand bar */
  --am-tabbar-h:   50px;
  --am-actionbar-h: 64px;  /* mobile bottom CTA bar */
  --am-tap:        44px;   /* minimum touch target */
}

@media (min-width: 640px)  { :root { --am-gutter: var(--am-6); } }
@media (min-width: 1024px) { :root { --am-gutter: var(--am-8); --am-bar-h: 64px; } }

/* The page is a committed dark product surface — it does not follow the
   viewer's light/dark preference. Colours are declared once, above. */