/* Ölkompaniet design tokens – single source of truth for the theme. */
:root {
  /* Brand blues */
  --olk-blue-600: #2F5D8A;   /* header band, secondary/recipe buttons, search button, links */
  --olk-blue-800: #1C4870;   /* nav bar, hover on blue, link hover */
  --olk-blue-900: #143754;   /* active nav tab, footer, hero */
  --olk-blue-50:  #F5F8FB;   /* recipe card background */
  --olk-blue-100: #EEF3F8;   /* selected option background */
  --olk-blue-200: #C9D6E3;   /* recipe card border */
  --olk-blue-chip:#E3ECF5;   /* "Innehåller redan" chip */

  /* Accents */
  --olk-orange-600: #C24A1B; /* BUY actions, sale price, sale badge (white text 4.9:1) */
  --olk-orange-700: #A33D14; /* buy hover */
  --olk-orange-400: #F26B3A; /* cart counter (dark text), active-tab underline, overlines on navy */
  --olk-red-700:    #A3262E; /* out of stock, errors, carousel chevrons */
  --olk-red-50:     #FBEAEA; /* error panel bg */
  --olk-red-200:    #E2B4B7; /* error panel border */
  --olk-green-700:  #2D7A4A; /* in stock, success */
  --olk-green-50:   #E8F3EC; /* success panel bg */
  --olk-green-200:  #A9CDB6; /* success panel border */

  /* Neutrals */
  --olk-cream-100: #EEEAE3;  /* page background */
  --olk-gray-200:  #E3E3E3;  /* search band, disabled */
  --olk-gray-100:  #F4F4F4;  /* tiles, image wells, stepper buttons */
  --olk-line:      #DCD7CE;  /* card borders */
  --olk-divider:   #ECECEC;  /* inner dividers */
  --olk-input:     #C9C9C9;  /* input borders */
  --olk-muted:     #8A9199;  /* placeholder / disabled text (decorative only) */
  --olk-ink-900:   #1E2731;  /* text */
  --olk-ink-700:   #3B4652;  /* body copy on white */
  --olk-ink-600:   #55606B;  /* secondary text */
  --olk-white:     #FFFFFF;

  /* Type */
  --olk-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --olk-fs-wordmark: 56px; --olk-fs-h1: 36px; --olk-fs-h2: 28px; --olk-fs-h3: 18px;
  --olk-fs-body: 16px; --olk-lh-body: 26px; --olk-fs-small: 14px; --olk-fs-overline: 13px;
  --olk-tracking-tagline: 0.24em; --olk-tracking-overline: 0.14em;

  /* Shape & depth */
  --olk-radius: 2px;
  --olk-shadow-nav:  0 4px 10px rgba(0,0,0,.25);
  --olk-shadow-card: 0 6px 18px rgba(20,55,84,.14);
  --olk-shadow-mega: 0 12px 24px rgba(0,0,0,.18);
  --olk-shadow-drawer: -12px 0 32px rgba(0,0,0,.22);
  --olk-scrim: rgba(20,55,84,.55);
  --olk-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #2F5D8A;

  /* Layout */
  --olk-container: 1390px;
  --olk-gutter: 24px;        /* 16px below 768 */
  --olk-header-h: 128px;     /* 64px mobile */
  --olk-nav-h: 66px;
  --olk-drawer-w: 480px;
}