/* ============================================================
   Vertikal Sport: design tokens
   One source of truth for colour, type, spacing, radius, shadow
   and motion. Documented in DESIGN.md. Change values here, never
   hardcode them in components.
   ============================================================ */

/* Manrope, self-hosted (SIL Open Font License, see assets/fonts/OFL-LICENSE.txt).
   Variable weight 200 to 800. The browser only downloads the subsets a page uses. */
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ---- colour: base palette ---- */
  --ink:#000;                 /* text, headings, dark surfaces */
  --paper:#fff;               /* page background */
  --chalk:#f2f0f1;            /* product image wells, quiet panels */
  --chalk-2:#e9e7e8;          /* hover on chalk */
  --line:#e2e0e1;             /* borders, dividers */
  --rope:#c24e00;             /* primary action. White text on it = 4.79:1 (AA) */
  --rope-hover:#a94300;
  --flame:#f57906;            /* non-text accent only: progress bars, focus glow */
  --hivis:#ffd400;            /* Professional section accent, always on black */

  /* ---- colour: text ---- */
  --txt:#000;
  --txt-2:#595959;            /* secondary text, 7:1 on white */
  --txt-3:#6b6b6b;            /* captions, 5.3:1 on white */
  --on-dark:#fff;

  /* ---- colour: status ---- */
  --ok:#0a7a35;               /* in stock, success */
  --ok-bg:#e6f4ec;
  --warn:#8a5a00;             /* low stock text */
  --warn-bg:#fff4d6;
  --bad:#b42318;              /* out of stock, sale price, errors */
  --bad-bg:#fdecea;

  /* ---- type ---- */
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fs-xs:.8125rem;   /* 13 */
  --fs-sm:.875rem;    /* 14 */
  --fs-md:1rem;       /* 16, body */
  --fs-lg:1.125rem;   /* 18 */
  --fs-xl:1.375rem;   /* 22 */
  --fs-2xl:1.75rem;   /* 28 */
  --fs-3xl:2.25rem;   /* 36 */
  --fs-4xl:3rem;      /* 48 */
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.55;
  --fw-regular:450;
  --fw-medium:600;
  --fw-bold:700;
  --fw-black:800;
  --track-display:-.025em;

  /* ---- spacing (4px base) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --gutter:16px;              /* page side padding, grows with the viewport */
  --max:1280px;               /* content width */
  --measure:68ch;             /* reading width for prose */

  /* ---- radius: small for data, larger for media, pill for actions ---- */
  --r-xs:4px;   /* tags, certification stamps */
  --r-sm:8px;   /* inputs, chips */
  --r-md:14px;  /* cards, panels */
  --r-lg:20px;  /* product image wells, modals */
  --r-pill:999px;

  /* ---- elevation ---- */
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 6px 24px rgba(0,0,0,.10);
  --shadow-3:0 18px 48px rgba(0,0,0,.18);

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:120ms;
  --t-base:200ms;
  --t-slow:320ms;

  /* ---- layout ---- */
  --header-h:60px;
  --header-h-compact:52px;
  --tap:44px;                 /* minimum touch target */
  --z-header:50; --z-drawer:80; --z-modal:90; --z-toast:100;
}
@media (min-width:640px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:40px;--header-h:72px}}

@media (prefers-reduced-motion:reduce){
  :root{--t-fast:0ms;--t-base:0ms;--t-slow:0ms}
}