/* ============================================================
   KTM Sklep Design System — Foundations
   Source: Figma "KTM redesign 2024"
   ============================================================ */

/* -------- Google Fonts (substitutions for licensed families) --
   SOURCE FAMILIES IN FIGMA:
     Blender Pro Heavy/Bold   → display H-MEGA / H1 (licensed)
     Industry-BlackItalic     → italic headings & button labels (licensed)
     Rajdhani                 → body / UI (Google Fonts, exact match)
     Libre Franklin           → long-form body (Google Fonts, exact match)
   Substitutes used below (flag to user — provide real fonts):
     Saira Condensed Black  ↔ Blender Pro Heavy
     Saira Condensed Black Italic ↔ Industry-BlackItalic
-------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Libre+Franklin:wght@300;400;500;600;700&family=Saira+Condensed:ital,wght@0,400;0,700;0,800;0,900;1,800;1,900&display=swap");

:root {
  /* ============================================================
     COLOR — PRIMARY (red accent, the only brand hue)
     Top usage: 3401× in Figma file
  ============================================================ */
  --ktm-red-900: #8f0920;   /* deep, rare — on-promo accent */
  --ktm-red-700: #cb0d25;   /* PRIMARY brand red — buttons, price, CTAs */
  --ktm-red-500: #e83148;   /* hover / energetic */
  --ktm-red-100: #fde6ea;   /* tint — sale badge backgrounds */

  /* ============================================================
     COLOR — NEUTRALS (the workhorses — text, borders, bg)
  ============================================================ */
  --ktm-black:   #000000;
  --ktm-ink:     #201d1e;   /* near-black text (5850×) */
  --ktm-900:     #1a1a1a;
  --ktm-800:     #212121;
  --ktm-700:     #404040;   /* 2ndary text, icon */
  --ktm-600:     #474747;
  --ktm-500:     #737373;   /* muted text / placeholder (5371×) */
  --ktm-400:     #a6a5a5;   /* border / input outline */
  --ktm-300:     #d6d6d6;   /* soft border */
  --ktm-200:     #f5f5f5;   /* panel bg (4052×) */
  --ktm-100:     #f7f7f7;
  --ktm-white:   #ffffff;

  /* ============================================================
     COLOR — SEMANTIC (stock status, alerts)
  ============================================================ */
  --sem-success:     #00b67a;   /* in stock, shipping OK */
  --sem-success-200: #d0f5e3;
  --sem-danger:      #f2290d;   /* out of stock, hot promo */
  --sem-danger-200:  #fcd6d2;
  --sem-warn:        #ff6600;   /* KTM ORANGE — back-in-stock eta, KTM brand accent */
  --sem-warn-200:    #ffe0cc;
  --sem-info:        #00579f;
  --sem-info-200:    #d6e4ff;

  /* KTM ORANGE legacy — secondary brand accent (1393× in file) */
  --ktm-orange:      #ff6600;
  --ktm-orange-400:  #ffa800;

  /* ============================================================
     FOREGROUND / BACKGROUND SEMANTIC TOKENS
  ============================================================ */
  --fg-1: var(--ktm-ink);       /* primary text */
  --fg-2: var(--ktm-700);       /* secondary text, meta */
  --fg-3: var(--ktm-500);       /* muted, helper */
  --fg-inv: var(--ktm-white);
  --fg-accent: var(--ktm-red-700);

  --bg-1: var(--ktm-white);     /* page */
  --bg-2: var(--ktm-200);       /* panel, thumbnail wells */
  --bg-dark: var(--ktm-ink);    /* dark bar / CTA background */
  --bg-promo: var(--ktm-red-700);

  --border-1: var(--ktm-300);   /* default component border */
  --border-2: var(--ktm-400);   /* active input border */
  --border-3: var(--ktm-ink);   /* selected / pressed border */

  /* ============================================================
     TYPOGRAPHY — FAMILIES
  ============================================================ */
  /* Kroje własne dealera — Rajdhani w interfejsie, Saira Condensed w nagłówkach,
     Libre Franklin w dłuższym tekście. Systemowy stos Apple był tu przymierzony
     i odrzucony (decyzja właściciela, 2026-08-29: „poprzednie czcionki bardziej
     mi się podobały") — w tym miejscu konwencja projektu bije wzorzec Apple.
     Rodziny zostają w tokenach, żeby zmiana zdania była jedną linijką. */
  --font-display: "Saira Condensed", "Blender Pro", "Industry",
                   "Impact", sans-serif;                     /* H-MEGA */
  --font-italic:  "Saira Condensed", "Industry-BlackItalic",
                   "Arial Black", sans-serif;                /* nagłówki kursywą + etykiety przycisków */
  --font-ui:      "Rajdhani", "Blender Pro", system-ui,
                   "Segoe UI", sans-serif;                   /* interfejs */
  --font-body:    "Libre Franklin", "Inter", system-ui,
                   sans-serif;                               /* dłuższy tekst */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;  /* VIN, SKU, kwoty */

  /* ============================================================
     TYPOGRAPHY — SCALE (matches Figma Fonty styleguide)
  ============================================================ */
  /* Display (italic black, very tight) */
  --fs-hmega: 64px;
  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 16px;

  /* Body (Rajdhani / Libre Franklin) */
  --fs-body-xl: 21px;
  --fs-body-l: 18px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-body-xs: 12px;
  --fs-body-tiny: 10px;

  /* ============================================================
     SPACING (8px base + common 4/12/16/24/32/48/64)
  ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ============================================================
     RADII — miękkie narożniki w całym systemie (decyzja właściciela,
     2026-08-29: „lubię te zaokrąglone ramki, zrób tak w całym systemie").
     Trzy stopnie, bo tyle wielkości powierzchni tu jest — piksele wpisywane
     w komponenty się rozjeżdżają, token zmienia wszystko naraz.
  ============================================================ */
  --radius-0: 0;
  --radius-1: 6px;    /* drobiazgi: pola, plakietki, przyciski w segmencie */
  --radius-2: 10px;   /* karty, panele, wiersze list */
  --radius-3: 14px;   /* duże powierzchnie: modale, szuflada, okna */
  --radius-pill: 999px;  /* pigułki i suwaki */

  /* ============================================================
     SHADOWS — used very sparingly. Flat + sharp is the vibe.
  ============================================================ */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,.08);
  --shadow-3: 0 12px 32px rgba(0,0,0,.12);

  /* ============================================================
     MOTION
  ============================================================ */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in:  cubic-bezier(.4,0,.6,1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Usage: class="h1" / class="body-m" / etc
   ============================================================ */

/* Base */
html { font-family: var(--font-ui); color: var(--fg-1); }
body { margin: 0; background: var(--bg-1); -webkit-font-smoothing: antialiased; }

/* Display — italic black caps, always UPPERCASE, very tight line-height */
.h-mega, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-italic);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--fg-1);
  margin: 0;
  line-height: 1;
}
.h-mega { font-size: var(--fs-hmega); font-family: var(--font-display); font-style: normal; letter-spacing: -0.01em; }
.h1     { font-size: var(--fs-h1); }
.h2     { font-size: var(--fs-h2); }
.h3     { font-size: var(--fs-h3); line-height: 1.1; }
.h4     { font-size: var(--fs-h4); line-height: 1.15; }
.h5     { font-size: var(--fs-h5); line-height: 1.2; }
.h6     { font-size: var(--fs-h6); line-height: 1.3; }

/* UI body — Rajdhani. The default workhorse. */
.body-xl   { font: 500 var(--fs-body-xl)/1.3 var(--font-ui); }
.body-l-1  { font: 600 var(--fs-body-l)/1.3 var(--font-ui); }
.body-l-2  { font: 400 var(--fs-body-l)/1.4 var(--font-ui); }
.body-m-1  { font: 600 var(--fs-body-m)/1.3 var(--font-ui); }
.body-m-2  { font: 500 var(--fs-body-m)/1.4 var(--font-ui); }
.body-s-1  { font: 600 var(--fs-body-s)/1.3 var(--font-ui); }
.body-s-2  { font: 500 var(--fs-body-s)/1.4 var(--font-ui); }
.body-xs-1 { font: 600 var(--fs-body-xs)/1.3 var(--font-ui); }
.body-xs-2 { font: 500 var(--fs-body-xs)/1.4 var(--font-ui); }
.body-tiny { font: 500 var(--fs-body-tiny)/1.3 var(--font-ui); }

/* Reading body — Libre Franklin, for blog + paragraphs */
.prose p   { font: 400 var(--fs-body-m)/1.55 var(--font-body); color: var(--fg-1); margin: 0 0 var(--sp-4); }

/* Button label — Industry Black Italic / Saira Condensed Italic, UPPERCASE */
.btn-label {
  font-family: var(--font-italic);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Muted / meta */
.text-muted { color: var(--fg-3); }
.text-dim   { color: var(--fg-2); }

/* Price (the recurring red-bold treatment) */
.price {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-body-xl);
  color: var(--fg-accent);
}
.price-old {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-body-s);
  color: var(--fg-3);
  text-decoration: line-through;
}