/* RetailLab design tokens — copied from the "RetailLab Design System"
   project in Claude Design (tokens/tokens.css), 2026-07-26.
   Rule for this project: components reference ONLY these variables —
   no raw colours, sizes, or fonts anywhere else in the CSS. */

:root {
  /* Primary (guidelines p.3) */
  --rl-retail-black: #181e2a;   /* PANTONE 532C */
  --rl-retail-lime: #d6de24;    /* PANTONE 389 */

  /* Secondary (guidelines p.3) */
  --rl-retail-lime-darker: #cccc23;
  --rl-retail-grey: #eeeeee;
  --rl-pure-black: #000000;
  --rl-yellow: #f6ff00;

  /* Gradients (guidelines p.3) */
  --rl-gradient-yellow-lime: linear-gradient(90deg, #f6ff00, #d6de24);
  --rl-gradient-lime: linear-gradient(90deg, #d6de24, #ffffff);
  --rl-gradient-grey: linear-gradient(90deg, #eeeeee, #ffffff);

  /* Web surfaces (as deployed on retaillab.flemingway.net) */
  --rl-surface-card: #1f2536;
  --rl-surface-muted: #252b3a;
  --rl-surface-footer: #0d1118;
  --rl-surface-cream: #f8f8f4;
  --rl-text-muted: #a0a8b8;
  --rl-border: rgba(255, 255, 255, 0.1);

  /* Type (guidelines p.2) */
  --rl-font-heading: 'Source Code Pro', monospace;
  --rl-font-body: 'Montserrat', sans-serif;
  --rl-text-headline: 53px;
  --rl-text-subhead: 24px;   /* Montserrat Bold */
  --rl-text-body: 16px;      /* Montserrat Regular */

  /* Element styles (guidelines p.6) — hard offset shadows, no blur */
  --rl-shadow-black: 0 7px 0 var(--rl-retail-black);
  --rl-shadow-lime: 0 7px 0 var(--rl-retail-lime);
  --rl-shadow-card-lime: 8px 10px 0 var(--rl-retail-lime);
  --rl-shadow-card-black: 8px 10px 0 var(--rl-retail-black);

  /* Shape */
  --rl-radius: 0.625rem;
  --rl-radius-pill: 999px;
  --rl-radius-card: 22px;
}