/* ============================================================
   KARLOVA KOHV — brand and type tokens
   The single source for colours, fonts and the type scale. Loaded before
   main.css and karlova-cart.css (components/html-head.tpl) and before
   karlova-checkout.css (layouts/Checkout.tpl).

   Scale: 12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48 px.
   Desktop uses 12/14/16/18/20/30/48; 24 and 36 are the ≤780px steps of
   30 and 48. The desktop submenu (15px) is the one deliberate exception.

   Roles (font · desktop → mobile · weight · transform · line-height):
     h1 page title        Antenna 48 → 36  500  none        1.05
     h2 section heading   Antenna 30 → 24  500  none        1.1
     h3 sub-heading       Antenna 20       500  none        1.3
     h4 minor heading     Antenna 16       500  none        1.3
     card title           Antenna 16 → 14  500  none        1.3
     price                Antenna 16 → 14  400  none        1.3
     product-page price   Antenna 20       400  none        1.3
     lead                 Karla   18 → 16  400              1.5
     body                 Karla   16       400              1.5
     small                Karla   14       400              1.5
     fine print           Karla   12       400              1.5
     button               Antenna 14       500  UPPERCASE 1px  1
     label / eyebrow      Antenna 12       500  UPPERCASE 1px  1.3
     text on photos       Antenna 24 / 16  700  none        1.1
     desktop submenu      Antenna 15       300 (Light)  none
   Letter-spacing only on uppercase text (1px), 0 everywhere else.

   Antenna weights follow the files: Light 300, Regular 400, Medium 500, Bold 700
   (--fw-light, --fw-regular, --fw-medium, --fw-bold). Light is used only by the
   desktop submenu.
   Karla is loaded in 400 / 700 (+ 400 italic).
   ============================================================ */

@font-face {
  font-family: 'Antenna';
  src: url('/assets/AntennaCond-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antenna';
  src: url('/assets/AntennaCond-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antenna';
  src: url('/assets/AntennaCond-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antenna';
  src: url('/assets/AntennaCond-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colours: brown on white, white on photos and buttons, muted brown (never grey) */
  --kk-brown: #4F2C1D;
  --kk-muted: rgba(79, 44, 29, 0.62);
  --kk-white: #FFFFFF;
  --kk-box: #F6F1E9;     /* light beige boxes: photo frames, summary pane, code */
  --kk-error: #B3261E;
  --kk-ok: #3E6B34;

  /* Families */
  --font-display: 'Antenna', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Weights */
  --fw-light: 300;     /* Antenna Light: the desktop submenu only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-text: 400;      /* Karla */
  --fw-text-bold: 700;

  /* Size scale */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;

  /* Role sizes (desktop; the ≤780px steps are below) */
  --fs-h1: var(--fs-48);
  --fs-h2: var(--fs-30);
  --fs-h3: var(--fs-20);
  --fs-h4: var(--fs-16);
  --fs-card: var(--fs-16);
  --fs-price: var(--fs-16);
  --fs-price-pdp: var(--fs-20);
  --fs-lead: var(--fs-18);
  --fs-body: var(--fs-16);
  --fs-small: var(--fs-14);
  --fs-fine: var(--fs-12);
  --fs-button: var(--fs-14);
  --fs-label: var(--fs-12);
  --fs-photo-hero: var(--fs-24);
  --fs-photo-label: var(--fs-16);
  --fs-submenu: 15px;  /* desktop dropdown: the user's choice, off-scale on purpose */

  /* Line heights */
  --lh-h1: 1.05;
  --lh-h2: 1.1;
  --lh-ui: 1.3;        /* h3, h4, card titles, prices, labels */
  --lh-text: 1.5;      /* lead, body, small, fine print */
  --lh-button: 1;
  --lh-photo: 1.1;

  /* Tracking: uppercase only */
  --ls-caps: 1px;

  /* Buttons: square corners; Antenna caps sit ~1.5px above the centre of
     their line box, so buttons get that much more padding on top. */
  --btn-radius: 0;
  --btn-nudge: 1.5px;
}

@media screen and (max-width: 780px) {
  :root {
    --fs-h1: var(--fs-36);
    --fs-h2: var(--fs-24);
    --fs-card: var(--fs-14);
    --fs-price: var(--fs-14);
    --fs-lead: var(--fs-16);
  }
}