/* Hallmark · macrostructure: Rounded Panels (Truda-style, custom) · tone: bold FMCG / trade · anchor hue: brand red
 * theme: custom · vibe: "white shelf, brand red panels, poster headlines"
 * paper #FFFFFF · accent #C8141F (soft red gradient panels) · Oswald (display) + Montserrat (body)
 * axes: light / display-condensed / warm
 * Source of truth: DESIGN.md §5. Never hard-code colours or fonts outside this file.
 * Contrast (WCAG 2.1): every text pairing below passes AA; see DESIGN.md §5 table.
 */
:root {
  /* Colour — white is the main colour, red is secondary + accent */
  --color-paper: #FFFFFF;          /* page background */
  --color-paper-2: #F5F5F5;        /* soft panels, image wells */
  --color-surface: #FFFFFF;        /* cards, fields */
  --color-ink: #303030;            /* body + headings on white: 13.2:1 */
  --color-ink-2: #4D4D4D;          /* secondary text: 8.5:1 on white, 7.8:1 on paper-2 */
  --color-rule: #E2E2E2;           /* borders (decorative) */
  --color-field: #8A8A8A;          /* input borders: 3.4:1 on white (UI ≥ 3:1) */
  --color-red: #C8141F;            /* brand red: 5.9:1 with white either way */
  --color-red-deep: #9E0E17;       /* hover/pressed, red text on white: 8.2:1 */
  --color-red-dark: #7A0A12;       /* decorative rays on red panels */
  --gradient-red: linear-gradient(150deg, #CF1A24 0%, #BA131D 50%, #9A0F18 100%); /* lightest stop 5.5:1 with white */
  --color-yellow: #FFD21F;         /* logo yellow: highlight only, never text on white */
  --color-on-red: #FFFFFF;         /* text on red panels: ≥5.5:1 across the gradient */
  --color-wa: #1E7A45;             /* WhatsApp green, darkened for AA: 5.4:1 with white */
  --color-wa-deep: #17613A;        /* hover: 7.4:1 with white */
  --color-focus: #1A56DB;          /* focus ring: 6.3:1 on white */
  --color-focus-on-red: #FFFFFF;
  --color-error: #B3141C;          /* 6.6:1 on white */
  --color-success: #1E6B3A;        /* 6.6:1 on white */

  /* Type */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5.75rem);

  /* Space (4pt) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --panel-inset: clamp(0.5rem, 1.2vw, 1.25rem);
  --container: 1400px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-panel: clamp(20px, 3vw, 36px);
  --radius-pill: 999px;
  --rule: 1px solid var(--color-rule);
  --shadow-card: 0 2px 4px rgb(26 26 26 / 0.05), 0 12px 28px rgb(26 26 26 / 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  /* Layout */
  --header-h: 76px;
  --mobile-bar-h: 64px;
}