/* =============================================================================
   Design Tokens — Автозапчасти (Auto Parts Landing)
   Auto-generated by Designer Agent · single source of truth
   Brand voltage: Signal Orange (#f56616) on a warm graphite canvas
   Structure adapted from the Airbnb reference (single-voltage CTA, soft
   rounding, generous whitespace) · re-colored for automotive retail.
   ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
       COLORS — Primary (Signal Orange · performance / trust / energy)
       --------------------------------------------------------------------- */
    --color-primary-50:  #fff5ed;
    --color-primary-100: #ffe8d4;
    --color-primary-200: #fdd0a9;
    --color-primary-300: #fbb173;
    --color-primary-400: #f8873c;
    --color-primary-500: #f56616; /* main brand voltage — CTAs, active states */
    --color-primary-600: #e14e0a; /* hover / pressed */
    --color-primary-700: #ba3b0d;
    --color-primary-800: #942f12;
    --color-primary-900: #782911;
    --color-primary-rgb: 245, 102, 22;

    /* COLORS — Accent (Steel Blue · secondary, links, tech accents) */
    --color-accent-50:  #eef4fb;
    --color-accent-100: #d9e6f5;
    --color-accent-200: #b7cfe9;
    --color-accent-300: #8bb0d8;
    --color-accent-400: #5b8cc2;
    --color-accent-500: #3a6ea5; /* accent */
    --color-accent-600: #2d5788;
    --color-accent-700: #274870;
    --color-accent-800: #243d5e;
    --color-accent-900: #21344f;

    /* COLORS — Neutral (warm graphite / steel — never pure gray) */
    --color-neutral-50:  #faf9f7; /* warm white — page canvas */
    --color-neutral-100: #f4f2ee;
    --color-neutral-200: #e6e3dd; /* borders, dividers */
    --color-neutral-300: #d3cec6;
    --color-neutral-400: #a8a199;
    --color-neutral-500: #78716b; /* muted text */
    --color-neutral-600: #57514c;
    --color-neutral-700: #423d39;
    --color-neutral-800: #292623; /* body text */
    --color-neutral-900: #1a1815; /* warm black — headings */

    /* COLORS — Semantic */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error:   #dc2626;
    --color-info:    #2563eb;

    /* COLORS — Surface roles (light) */
    --color-canvas:        var(--color-neutral-50);
    --color-surface:       #ffffff;      /* raised cards on warm canvas */
    --color-surface-soft:  var(--color-neutral-100);
    --color-surface-strong:var(--color-neutral-200);
    --color-text:          var(--color-neutral-800);
    --color-text-strong:   var(--color-neutral-900);
    --color-text-muted:    var(--color-neutral-500);
    --color-on-primary:    #ffffff;
    --color-hairline:      var(--color-neutral-200);
    --color-hairline-strong: var(--color-neutral-300);

    /* COLORS — Surface roles (dark) — footer, dark sections, dark mode */
    --color-dark-canvas:   #151311;
    --color-dark-surface:  #211d1a;
    --color-dark-surface-soft: #2b2622;
    --color-dark-text:     #ede9e3;
    --color-dark-text-muted: #a8a199;
    --color-dark-hairline: #3a342f;

    /* ---------------------------------------------------------------------
       TYPOGRAPHY
       --------------------------------------------------------------------- */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type scale — comfortable density, ratio 1.250 (major second), base 16px */
    --text-xs:   0.75rem;   /* 12px */
    --text-sm:   0.875rem;  /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.25rem;   /* 20px */
    --text-xl:   1.5rem;    /* 24px */
    --text-2xl:  2rem;      /* 32px */
    --text-3xl:  2.5rem;    /* 40px */
    --text-4xl:  3.25rem;   /* 52px */

    /* Letter-spacing */
    --letter-tight:  -0.03em; /* display / headlines */
    --letter-snug:   -0.02em;
    --letter-normal: 0;
    --letter-wide:   0.05em;   /* uppercase labels / eyebrows */

    /* Line-height */
    --leading-tight:   1.12;
    --leading-snug:    1.28;
    --leading-normal:  1.65;
    --leading-relaxed: 1.75;

    /* Font weights (max 3 per page) */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;

    /* ---------------------------------------------------------------------
       SPACING — 8px base grid
       --------------------------------------------------------------------- */
    --space-0:  0;
    --space-1:  0.25rem;  /* 4px */
    --space-2:  0.5rem;   /* 8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */
    --space-section: clamp(4rem, 8vw, 7rem); /* comfortable section rhythm */

    /* ---------------------------------------------------------------------
       BORDER RADIUS — modern (md default, lg for cards)
       --------------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ---------------------------------------------------------------------
       SHADOWS — ultra-diffuse, warm-tinted
       --------------------------------------------------------------------- */
    --shadow-sm:    0 1px 2px rgba(26, 24, 21, 0.04);
    --shadow-md:    0 4px 12px rgba(26, 24, 21, 0.06);
    --shadow-lg:    0 8px 24px rgba(26, 24, 21, 0.08);
    --shadow-xl:    0 16px 48px rgba(26, 24, 21, 0.10);
    --shadow-inner: inset 0 1px 3px rgba(26, 24, 21, 0.06);
    --shadow-glow:  0 0 24px rgba(var(--color-primary-rgb), 0.18);

    /* ---------------------------------------------------------------------
       MOTION — moderate intensity
       --------------------------------------------------------------------- */
    --duration-fast:   150ms;
    --duration-normal: 300ms;
    --duration-slow:   500ms;
    --duration-slower: 700ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---------------------------------------------------------------------
       LAYOUT
       --------------------------------------------------------------------- */
    --container-max:     1280px;
    --container-narrow:  768px;
    --container-padding: 1.5rem;
    --measure:           65ch; /* max line length for body text */
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0ms;
        --duration-normal: 0ms;
        --duration-slow:   0ms;
        --duration-slower: 0ms;
    }
}