/* ==========================================================================
   Hoštecké kočky — KRABICE
   Token layer. Palette, four type voices, scale, rhythm.
   Binding source: _spec/DESIGN.md §2. Do not add colors or faces.
   ========================================================================== */

/* --- Řeč (speech): headlines, section heads, product names ---------------- */
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/zilla-slab-600.woff2') format('woff2');}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/zilla-slab-700.woff2') format('woff2');}

/* --- Značení (markings): the crate voice. UPPERCASE ONLY ------------------ */
@font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/saira-stencil-one-400-latin.woff2') format('woff2');
  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;}
@font-face{font-family:'Saira Stencil One';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/saira-stencil-one-400-latinext.woff2') format('woff2');
  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;}

/* --- Text: body copy, UI labels, forms ----------------------------------- */
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/alegreya-sans-400.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/alegreya-sans-500.woff2') format('woff2');}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/alegreya-sans-700.woff2') format('woff2');}

/* --- Záznam (records): everything counted or timestamped ----------------- */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');}

:root{
  /* Palette — sampled from THEIR voucher artwork. No other colors exist. */
  --papir:#F4EEE1;
  --papir-vpad:#EAE2D0;
  --karton:#C79A63;
  --karton-stin:#A87E4C;
  --inkoust:#241D15;
  --signal:#F59C1E;        /* FILLS ONLY. Never a text color. */
  --signal-tmavy:#9C5700;  /* the only signal TEXT color on paper */
  --stitek-bila:#FBF8F1;

  /* Voices */
  --rec:'Zilla Slab',Georgia,'Times New Roman',serif;
  --znaceni:'Saira Stencil One','Zilla Slab',Impact,sans-serif;
  --text:'Alegreya Sans','Segoe UI',system-ui,sans-serif;
  --zaznam:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  /* Rhythm */
  --u:8px;
  --sirka:1200px;
  --zlab:24px;
  --rytmus:112px;

  /* The one sanctioned shadow */
  --stin-krabice:0 10px 24px rgb(36 29 21 / .14);
  --stin-krabice-zvednuta:0 18px 34px rgb(36 29 21 / .18);
}

@media (max-width:820px){ :root{ --rytmus:72px; --zlab:16px; } }

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

/* The hidden attribute must beat any display rule a component sets. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papir);            /* flat fill, NEVER a gradient */
  color:var(--inkoust);
  font-family:var(--text);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;                  /* 390px overflow guard */
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--rec); font-weight:700; line-height:1.08; margin:0; }
h1{ font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.04; letter-spacing:-.005em; }
h2{ font-size:clamp(1.6rem,3vw,2.25rem); }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0 0 1em; }
a{ color:inherit; }

/* Cardboard is cut straight. Nothing rounder than 3px, anywhere. */
button,input,select,textarea,img,svg,.krabice,.stitek{ border-radius:3px; }

/* Značení — the crate voice. Uppercase, tracked, never below 12px,
   never used for a sentence. */
.znaceni{
  font-family:var(--znaceni);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:clamp(12px,1.1vw,13px);
  line-height:1.2;
}

/* Záznam — anything counted. tabular-nums is mandatory. */
.zaznam,.cena,.cislo{
  font-family:var(--zaznam);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.obal{ width:min(100% - (var(--zlab) * 2),var(--sirka)); margin-inline:auto; }
.sekce{ padding-block:var(--rytmus); }

.skryte{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--signal-tmavy);
  outline-offset:2px;
}