/* ==========================================================================
   autozeug — Design Tokens (Trendyol-like, bright e-commerce)
   Brand anchor: #FF6000 (sampled from the AUTO[ZEUG] logo)
   "The new way of buying a car." TR market · Turkish Lira (₺)
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     BRAND — orange scale derived from the logo (#FF6000 = brand-500)
     --------------------------------------------------------------------- */
  --az-orange-50:  #FFF3EB;
  --az-orange-100: #FFE2CC;
  --az-orange-200: #FFC299;
  --az-orange-300: #FFA266;
  --az-orange-400: #FF8333;
  --az-orange-500: #FF6000; /* ◀ BRAND PRIMARY */
  --az-orange-600: #E55600; /* hover / pressed */
  --az-orange-700: #C24800;
  --az-orange-800: #8F3500;
  --az-orange-900: #5C2200;

  --az-primary:        var(--az-orange-500);
  --az-primary-hover:  var(--az-orange-600);
  --az-primary-active: var(--az-orange-700);
  --az-primary-subtle: var(--az-orange-50);  /* tinted backgrounds */
  --az-on-primary:     #FFFFFF;              /* text on orange */

  /* ---------------------------------------------------------------------
     NEUTRALS / INK — Trendyol-like cool grays on white surfaces
     --------------------------------------------------------------------- */
  --az-white:    #FFFFFF;
  --az-ink-50:   #FAFAFB;
  --az-ink-100:  #F3F3F5;
  --az-ink-200:  #E8E8EC;
  --az-ink-300:  #D6D6DC;
  --az-ink-400:  #A8A8B3;
  --az-ink-500:  #74747F;
  --az-ink-600:  #54545E;
  --az-ink-700:  #3A3A42;
  --az-ink-800:  #26262C;
  --az-ink-900:  #17171B;

  /* surfaces */
  --az-bg:           var(--az-ink-50);    /* page background (off-white) */
  --az-surface:      var(--az-white);     /* cards */
  --az-surface-alt:  var(--az-ink-100);   /* subtle panels */
  --az-border:       var(--az-ink-200);
  --az-border-strong:var(--az-ink-300);

  /* text */
  --az-text:         var(--az-ink-900);   /* primary text */
  --az-text-muted:   var(--az-ink-600);   /* secondary */
  --az-text-subtle:  var(--az-ink-500);   /* captions, disclaimers */
  --az-text-on-dark: var(--az-white);

  /* ---------------------------------------------------------------------
     SEMANTIC — status + the Trendyol "deal green" for prices/savings
     --------------------------------------------------------------------- */
  --az-success:        #16A34A;
  --az-success-subtle: #E7F6EC;
  --az-danger:         #E11D48;  /* errors, validation */
  --az-danger-subtle:  #FDE7EC;
  --az-warning:        #F59E0B;
  --az-warning-subtle: #FEF3E2;
  --az-info:           #2563EB;
  --az-info-subtle:    #E8EFFE;

  /* "deal green" — installment/price highlight, like Trendyol discounts */
  --az-deal:           #00B47E;
  --az-deal-subtle:    #E2F7F0;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
       - Display/brand: geometric techno face echoing the bracket wordmark
       - UI/body: clean humanist sans (Trendyol-Sans-like)
     --------------------------------------------------------------------- */
  --az-font-brand: "Chakra Petch", "Michroma", "Rajdhani", sans-serif;
  --az-font-sans:  "Inter", "Manrope", -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
  --az-font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* for ₺ figures */

  /* type scale (1.250 major-third-ish, tuned for e-commerce density) */
  --az-fs-display: 2.986rem; /* ~47.8px hero */
  --az-fs-h1:      2.488rem;
  --az-fs-h2:      2.074rem;
  --az-fs-h3:      1.728rem;
  --az-fs-h4:      1.440rem;
  --az-fs-lg:      1.200rem;
  --az-fs-base:    1.000rem; /* 16px */
  --az-fs-sm:      0.875rem;
  --az-fs-xs:      0.750rem;

  --az-fw-regular:  400;
  --az-fw-medium:   500;
  --az-fw-semibold: 600;
  --az-fw-bold:     700;

  --az-lh-tight:   1.15;
  --az-lh-snug:    1.35;
  --az-lh-normal:  1.55;

  --az-tracking-brand: 0.04em; /* letterspacing for the techno wordmark */

  /* ---------------------------------------------------------------------
     SPACING — 4px base scale
     --------------------------------------------------------------------- */
  --az-space-0:  0;
  --az-space-1:  0.25rem;  /* 4 */
  --az-space-2:  0.5rem;   /* 8 */
  --az-space-3:  0.75rem;  /* 12 */
  --az-space-4:  1rem;     /* 16 */
  --az-space-5:  1.5rem;   /* 24 */
  --az-space-6:  2rem;     /* 32 */
  --az-space-7:  3rem;     /* 48 */
  --az-space-8:  4rem;     /* 64 */
  --az-space-9:  6rem;     /* 96 */

  /* ---------------------------------------------------------------------
     RADIUS — Trendyol-ish: soft but not pill-y (cards 12, buttons 8)
     --------------------------------------------------------------------- */
  --az-radius-xs:   4px;
  --az-radius-sm:   8px;
  --az-radius-md:   12px;
  --az-radius-lg:   16px;
  --az-radius-xl:   24px;
  --az-radius-pill: 999px;

  /* ---------------------------------------------------------------------
     ELEVATION — light, e-commerce card shadows
     --------------------------------------------------------------------- */
  --az-shadow-sm: 0 1px 2px rgba(23, 23, 27, 0.06),
                  0 1px 1px rgba(23, 23, 27, 0.04);
  --az-shadow-md: 0 4px 12px rgba(23, 23, 27, 0.08);
  --az-shadow-lg: 0 12px 28px rgba(23, 23, 27, 0.12);
  --az-shadow-orange: 0 8px 20px rgba(255, 96, 0, 0.28); /* glowing CTA */

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --az-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --az-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --az-dur-fast:    120ms;
  --az-dur-base:    220ms;
  --az-dur-slow:    400ms;

  /* layout */
  --az-container:   1200px;
  --az-z-header:    100;
  --az-z-modal:     1000;
  --az-z-toast:     1100;
}