/* ────────────────────────────────────────────────────────────────────────
   IPV Data — Colors & Typography Foundations
   From the IPV Data design system (colors_and_type.css).
   ──────────────────────────────────────────────────────────────────────── */

/* ── Fonts ────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand Color: IPV Blue ─────────────────────────────────────────── */
  --ipv-blue-50:  #EEF2FF;
  --ipv-blue-100: #DCE3FF;
  --ipv-blue-200: #B6C2FF;
  --ipv-blue-300: #8597FE;
  --ipv-blue-400: #556EFA;
  --ipv-blue-500: #2952ED;  /* PRIMARY */
  --ipv-blue-600: #1A3DC4;  /* hover / press */
  --ipv-blue-700: #142F99;
  --ipv-blue-800: #0F2270;
  --ipv-blue-900: #0A164A;

  /* ── Neutrals ─────────────────────────────────────────────────────── */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8FB;
  --neutral-100: #EFF1F5;
  --neutral-200: #E2E5EC;
  --neutral-300: #C7CCD6;
  --neutral-400: #9097A6;
  --neutral-500: #6B7384;
  --neutral-600: #4A515F;
  --neutral-700: #2F343F;
  --neutral-800: #1E222B;
  --neutral-900: #0E1117;

  /* ── Semantic ─────────────────────────────────────────────────────── */
  --up:        #1F9D55;
  --up-soft:   #E5F6EC;
  --down:      #D03A3A;
  --down-soft: #FDECEC;
  --warn:      #E8941A;
  --warn-soft: #FCF1DE;
  --info:      var(--ipv-blue-500);
  --info-soft: var(--ipv-blue-50);

  /* Score chips */
  --score-a: #1F9D55;
  --score-b: #8DC53F;
  --score-c: #F6C53A;
  --score-d: #F39423;
  --score-e: #D03A3A;

  /* ── Retailer chip palette ────────────────────────────────────────── */
  --retailer-tesco:       #00539F;
  --retailer-asda:        #6DBE45;
  --retailer-sainsburys:  #F06C00;
  --retailer-morrisons:   #007A33;
  --retailer-iceland:     #CC092F;
  --retailer-waitrose:    #95C11F;
  --retailer-aldi:        #001E62;
  --retailer-ocado:       #6A2A8C;
  --retailer-ah:          #00ADE6;
  --retailer-jumbo:       #FDC30A;
  --retailer-deen:        #D6162C;
  --retailer-hoogvliet:   #66B3E5;

  /* ── Surfaces ─────────────────────────────────────────────────────── */
  --surface:        var(--neutral-0);
  --surface-soft:   var(--neutral-50);
  --surface-sunken: var(--neutral-100);
  --surface-dark:   var(--neutral-800);
  --surface-brand:  var(--ipv-blue-500);

  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-700);
  --fg-3: var(--neutral-500);
  --fg-4: var(--neutral-400);
  --fg-on-brand: #FFFFFF;
  --fg-on-brand-soft: rgba(255,255,255,0.78);

  --border:       var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ── Type Scale ───────────────────────────────────────────────────── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
               Consolas, monospace;

  --fs-display-1: clamp(48px, 6vw, 88px);
  --fs-display-2: clamp(36px, 4.5vw, 64px);
  --fs-h1:        clamp(32px, 3.6vw, 48px);
  --fs-h2:        clamp(26px, 2.6vw, 36px);
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-micro:     11px;

  --lh-tight:   1.06;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.12em;

  /* ── Spacing scale (4px base) ─────────────────────────────────────── */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ── Radii ────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 1px rgba(14, 17, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(14, 17, 23, 0.06), 0 1px 1px rgba(14, 17, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 17, 23, 0.08), 0 1px 2px rgba(14, 17, 23, 0.04);
  --shadow-lg: 0 12px 32px rgba(14, 17, 23, 0.10), 0 2px 6px rgba(14, 17, 23, 0.05);
  --shadow-xl: 0 24px 48px rgba(14, 17, 23, 0.14), 0 4px 12px rgba(14, 17, 23, 0.06);
  --shadow-blue: 0 16px 32px rgba(41, 82, 237, 0.24);

  /* ── Motion ───────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ── Semantic helpers ───────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0; text-wrap: pretty; }

.display-1 { font-size: var(--fs-display-1); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-2 { font-size: var(--fs-display-2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ipv-blue-500);
}

.lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

.muted { color: var(--fg-3); }

/* Tabular numerals everywhere prices/percentages appear */
.tabular, .price, td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}