/* ═══════════════════════════════════════════════
   FRESHCARSTUDIO — Design Tokens «In Motion»
   ═══════════════════════════════════════════════ */

:root {

  /* ── Colors ── */
  --bg:         #0A0A0A;
  --bg-2:       #111111;
  --bg-3:       #1A1A1A;
  --bg-card:    #141414;

  /* Yellow — PRIMARY (від логотипу) */
  --gold:       #FEE539;
  --gold-light: #FFF070;
  --gold-dim:   rgba(254, 229, 57, 0.15);
  --gold-glow:  rgba(254, 229, 57, 0.08);
  --gold-border:rgba(254, 229, 57, 0.25);

  /* Green — SECONDARY (від логотипу) */
  --green:        #B1DB2B;
  --green-light:  #C8EF45;
  --green-dim:    rgba(177, 219, 43, 0.15);
  --green-glow:   rgba(177, 219, 43, 0.08);
  --green-border: rgba(177, 219, 43, 0.25);

  --text:       #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.50);
  --text-dim:   rgba(255, 255, 255, 0.25);
  --text-faint: rgba(255, 255, 255, 0.12);

  --border:     rgba(255, 255, 255, 0.07);
  --border-gold:rgba(254, 229, 57, 0.22);

  /* ── Typography ── */
  --font:       'Inter', system-ui, -apple-system, sans-serif;

  --size-hero:   clamp(44px, 5.5vw, 68px);
  --size-h2:     clamp(32px, 3.8vw, 52px);
  --size-h3:     clamp(20px, 2vw, 26px);
  --size-body:   17px;
  --size-small:  14px;
  --size-label:  11px;

  --weight-light:  300;
  --weight-reg:    400;
  --weight-mid:    500;
  --weight-semi:   600;
  --weight-bold:   700;
  --weight-xbold:  800;
  --weight-black:  900;

  --leading-tight: 0.95;
  --leading-head:  1.08;
  --leading-body:  1.65;

  --tracking-tight: -0.03em;
  --tracking-hero:  -0.025em;
  --tracking-label: 0.28em;
  --tracking-btn:   0.14em;

  /* ── Spacing ── */
  --gutter:   80px;
  --gap-sm:   24px;
  --gap-md:   48px;
  --gap-lg:   80px;
  --gap-xl:   120px;
  --gap-2xl:  160px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);

  --dur-fast:   0.2s;
  --dur-mid:    0.4s;
  --dur-slow:   0.7s;

  /* ── Sizes ── */
  --nav-h:     68px;
  --max-w:     1440px;
  --content-w: 1280px;
}

/* Mobile overrides */
@media (max-width: 950px) {
  :root {
    --gutter: 24px;
    --gap-lg: 40px;
    --gap-xl: 60px;
    --gap-2xl: 80px;
    --nav-h: 60px;
  }
}