/* ========================================================
   L-SPEED DESIGN TOKENS
   Auto-Szkoła L-Speed — Bełchatów / Zelów
   ======================================================== */

/* Fonts — load via <link> in HTML:
   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:ital,wght@0,700;0,800;1,800&display=swap
*/

:root {
  /* ---------- COLORS — Brand ---------- */
  --graphite:      #0D0D0D;  /* main dark bg */
  --graphite-2:    #161616;  /* surface on dark */
  --graphite-3:    #1F1F1F;  /* elevated surface on dark */

  --ink:           #111111;  /* text on light, text on lime */
  --lime:          #C4F000;  /* accent — CTA bg, dark-bg accent */
  --lime-press:    #A8D000;  /* lime active/pressed */
  --lime-soft:     rgba(196, 240, 0, 0.10); /* lime overlay on dark */

  --white:         #FFFFFF;  /* main light bg */
  --gray-100:      #F4F4F4;  /* surface on light */
  --gray-200:      #E5E5E5;  /* dividers light, watermarks light */
  --gray-300:      #D1D1D1;  /* faint border light */
  --gray-500:      #8A8A8A;  /* secondary text */
  --gray-600:      #5A5A5A;  /* tertiary text light */
  --gray-700:      #3A3A3A;  /* divider dark, border dark */

  /* ---------- COLORS — Semantic ---------- */
  --bg-dark:       var(--graphite);
  --bg-dark-2:     var(--graphite-2);
  --bg-light:      var(--white);
  --bg-light-2:    var(--gray-100);

  --fg-on-dark:    var(--white);
  --fg-on-dark-2:  var(--gray-200);
  --fg-on-dark-3:  var(--gray-500);

  --fg-on-light:   var(--ink);
  --fg-on-light-2: var(--gray-600);
  --fg-on-light-3: var(--gray-500);

  --accent:        var(--lime);
  --accent-fg:     var(--ink);
  --accent-press:  var(--lime-press);

  --border-dark:   var(--gray-700);
  --border-light:  var(--gray-200);

  --success:       #2EB872;
  --error:         #FF3B3B;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale (in rem; root = 16px) */
  --t-display:     clamp(3.5rem, 8vw, 6.5rem);  /* hero — 56-104px */
  --t-h1:          clamp(2.5rem, 5vw, 4rem);    /* 40-64px */
  --t-h2:          clamp(1.875rem, 3.5vw, 2.75rem); /* 30-44px */
  --t-h3:          1.5rem;     /* 24px */
  --t-h4:          1.25rem;    /* 20px */
  --t-body-lg:     1.125rem;   /* 18px */
  --t-body:        1rem;       /* 16px */
  --t-small:       0.875rem;   /* 14px */
  --t-micro:       0.75rem;    /* 12px — labels, eyebrow */

  --lh-display:    0.95;
  --lh-headline:   1.1;
  --lh-body:       1.6;
  --lh-tight:      1.3;

  --ls-display:    -0.02em;
  --ls-headline:   -0.01em;
  --ls-eyebrow:    0.12em;
  --ls-body:       0;

  --fw-body:       400;
  --fw-body-md:    500;
  --fw-body-sb:    600;
  --fw-display:    800;
  --fw-display-2:  700;

  /* ---------- SPACING (4-base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    18px;
  --r-pill:  999px;

  /* ---------- SHADOWS (used sparingly) ---------- */
  --shadow-mobile-bar: 0 -8px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ---------- MOTION ---------- */
  --ease-speed:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-fast:        150ms;
  --d-base:        250ms;
  --d-reveal:      400ms;

  /* ---------- LAYOUT ---------- */
  --container:     1280px;
  --page-x:        24px;
}

/* ========================================================
   BASE
   ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--fg-on-light);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ========================================================
   TYPE — semantic classes
   ======================================================== */

.h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin: 0;
}

.h-display--italic {
  font-style: italic;
}

.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  margin: 0;
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--t-h2);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
  margin: 0;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-2);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  margin: 0;
}

.h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-2);
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-body-sb);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-dark-3);
}

.section-dark .eyebrow { color: var(--lime); }
.section-light .eyebrow { color: var(--fg-on-light-2); }

.body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
}

.body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.body-small {
  font-size: var(--t-small);
  line-height: var(--lh-body);
}

/* ========================================================
   LAYOUT — sections + container
   ======================================================== */

.section-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}

.section-light {
  background: var(--bg-light);
  color: var(--fg-on-light);
}

.section {
  padding: var(--s-9) 0;
}

@media (max-width: 720px) {
  .section { padding: var(--s-7) 0; }
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--page-x);
}

/* ========================================================
   BUTTONS
   ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--fw-display-2);
  font-size: var(--t-body);
  letter-spacing: 0.02em;
  padding: 14px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--d-fast) var(--ease-speed),
              background var(--d-fast) var(--ease-speed),
              color var(--d-fast) var(--ease-speed),
              border-color var(--d-fast) var(--ease-speed),
              transform var(--d-fast) var(--ease-speed);
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-primary:hover  { filter: brightness(0.95); }
.btn-primary:active { background: var(--accent-press); border-color: var(--accent-press); transform: translateY(1px); }

.btn-secondary-dark {
  background: transparent;
  color: var(--fg-on-dark);
  border-color: var(--gray-700);
}
.btn-secondary-dark:hover  { border-color: var(--lime); color: var(--lime); }
.btn-secondary-dark:active { background: var(--graphite-2); }

.btn-secondary-light {
  background: transparent;
  color: var(--fg-on-light);
  border-color: var(--gray-200);
}
.btn-secondary-light:hover  { border-color: var(--ink); }
.btn-secondary-light:active { background: var(--gray-100); }

.btn-lg { padding: 18px 28px; font-size: var(--t-body-lg); }
.btn-sm { padding: 10px 16px; font-size: var(--t-small); }

/* ========================================================
   CARDS
   ======================================================== */

.card {
  border-radius: var(--r-md);
  padding: var(--s-5);
  transition: transform var(--d-base) var(--ease-speed),
              border-color var(--d-base) var(--ease-speed);
}

.card-dark {
  background: var(--graphite-2);
  border: 1px solid var(--gray-700);
  color: var(--fg-on-dark);
}
.card-dark:hover { transform: translateY(-2px); border-color: var(--lime); }

.card-light {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--fg-on-light);
}
.card-light:hover { transform: translateY(-2px); border-color: var(--ink); }

/* ========================================================
   UTILITIES
   ======================================================== */

.text-accent { color: var(--accent); }
.text-muted-dark { color: var(--fg-on-dark-3); }
.text-muted-light { color: var(--fg-on-light-2); }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }