/* ==========================================================================
   FBT DESIGN SYSTEM — 1. TOKENS
   ==========================================================================
   Single source of truth for design tokens (colors, type, spacing, radius,
   shadow, motion). Every component/utility file below reuses these
   custom properties — never hardcode a raw value in component CSS.

   HISTORY NOTE (see Fase 3 report for full detail):
   The original Flatsome "Custom CSS" field contained TWO parallel token
   sets built at different times:
     - "Generation 1" (FITBEGINTIPS 2.0, coral/orange accent) — still used
       today by the product-review article template.
     - "Generation 2" (v0.2 "Sprint 2", blue accent) — the larger, newer
       set that drives most of the current site (homepage, productdetail,
       vergelijking, categorie, calculator, zoekresultaten, artikel,
       contact, over-ons, sidebar, site header/footer).
   Both are kept below because both are genuinely still rendering on the
   live site. Where Generation 2 redeclared a Generation 1 property name
   with a different value (--fbt-space-1..8 and --fbt-radius-sm/md/lg),
   Generation 2's value is what is ACTUALLY in effect today (it loads
   later in the original cascade), so that is the single value kept here
   — changing it would alter the current visual result. This means
   Generation 1 components have, in effect, always been rendering with
   Generation 2's slightly tighter spacing/radius scale rather than the
   larger numbers they were originally authored with. Flagged in the
   Fase 3 report as a candidate cleanup for a later phase; not changed now.
   ========================================================================== */

:root {

  /* ---- Generation 1 colors / shadow / font / container (coral accent) ---- */
  --fbt-primary: #ff5a3c;
  --fbt-primary-dark: #e14526;
  --fbt-primary-soft: rgba(255, 90, 60, .10);
  --fbt-secondary: #12181f;
  --fbt-secondary-soft: rgba(18, 24, 31, .06);
  --fbt-success: #627d47;
  --fbt-success-soft: rgba(98, 125, 71, .12);
  --fbt-alert: #b20000;
  --fbt-alert-soft: rgba(178, 0, 0, .10);
  --fbt-text: #4a4a4a;
  --fbt-text-muted: #767676;
  --fbt-border: #e6e6e9;
  --fbt-surface: #ffffff;
  --fbt-surface-alt: #f7f7f9;

  --fbt-font-heading: 'Poppins', sans-serif;
  --fbt-font-body: 'Lato', sans-serif;

  --fbt-shadow-card: 0 2px 10px rgba(18, 24, 31, .06);
  --fbt-shadow-card-hover: 0 12px 28px rgba(18, 24, 31, .14);
  --fbt-shadow-popover: 0 8px 24px rgba(18, 24, 31, .16);

  /* v2 "wider canvas" pass overrode the original v1 numbers — 1440/1320/36
     is the effective current value */
  --fbt-container: 1440px;
  --fbt-container-narrow: 1320px;
  --fbt-gutter: 36px;
  --fbt-sand: #f3eee6;
  --fbt-sand-dark: #e9e1d2;
  --fbt-ink: #0d1117;

  /* ---- Shared spacing/radius scale ----
     Declared once by Generation 1, redeclared with different (smaller)
     numbers by Generation 2 later in the original file — Generation 2's
     values are what currently renders for BOTH generations' components,
     so that is what is kept here (see history note above). */
  --fbt-space-1: 4px;  --fbt-space-2: 8px;  --fbt-space-3: 12px; --fbt-space-4: 16px;
  --fbt-space-5: 24px; --fbt-space-6: 32px; --fbt-space-7: 48px; --fbt-space-8: 64px;

  --fbt-radius-sm: 10px; --fbt-radius-md: 16px; --fbt-radius-lg: 22px; --fbt-radius-pill: 999px;

  /* ---- Generation 2 colors / type / shadow / container (blue accent) ---- */
  --fbt-color-navy-900: #0b1e3d;
  --fbt-color-navy-800: #122a52;
  --fbt-color-blue-600: #1d5fe0;
  --fbt-color-blue-700: #1750bf;
  --fbt-color-blue-50: #eef4ff;
  --fbt-color-blue-100: #dce8ff;

  --fbt-color-white: #ffffff;
  --fbt-color-gray-50: #f6f7f9;
  --fbt-color-gray-100: #eef0f3;
  --fbt-color-gray-200: #e2e5ea;
  --fbt-color-gray-400: #9aa1ac;
  --fbt-color-gray-600: #5b6270;

  --fbt-color-text: #10151f;
  --fbt-color-text-muted: #5b6270;
  --fbt-color-text-inverse: #ffffff;

  --fbt-color-success: #1d5fe0; /* bewust blauw i.p.v. groen voor consistentie */
  --fbt-color-star: #ffb020;
  --fbt-color-price: #0b1e3d;

  --fbt-font-base: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  --fbt-fs-display: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --fbt-fs-h1: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fbt-fs-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --fbt-fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fbt-fs-h4: 1.1rem; /* referenced by a few components but never defined in
                            the source (silently fell back to inherited size);
                            given an explicit value here so behaviour is
                            documented instead of accidental */
  --fbt-fs-body-lg: 1.125rem;
  --fbt-fs-body: 1rem;
  --fbt-fs-small: 0.875rem;
  --fbt-fs-micro: 0.75rem;

  --fbt-lh-tight: 1.15;
  --fbt-lh-normal: 1.5;

  --fbt-fw-regular: 400;
  --fbt-fw-medium: 500;
  --fbt-fw-semibold: 600;
  --fbt-fw-bold: 700;

  --fbt-section-padding-y: clamp(28px, 3vw + 12px, 64px);
  --fbt-section-padding-x: clamp(16px, 4vw, 64px);
  --fbt-section-gap: clamp(16px, 2vw, 32px);

  --fbt-shadow-sm: 0 1px 3px rgba(11, 30, 61, 0.06), 0 1px 2px rgba(11, 30, 61, 0.04);
  --fbt-shadow-md: 0 8px 24px rgba(11, 30, 61, 0.08);
  --fbt-shadow-lg: 0 16px 40px rgba(11, 30, 61, 0.12);

  --fbt-container-max: 1280px;

  --fbt-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --fbt-dur-fast: 150ms;
  --fbt-dur-med: 250ms;

  /* Local pair used only by the Productdetail voordelen/nadelen component —
     the one deliberate exception to the blue palette (design explicitly
     calls for green/red here). */
  --fbt-color-green-600: #1a8a4a;
  --fbt-color-green-50: #eaf7ef;
  --fbt-color-red-600: #d23c3c;
  --fbt-color-red-50: #fdeceb;

  /* XXL Nutrition price-comparison integration — per-retailer accent colors */
  --fbt-store-xxl: #E2001A;
  --fbt-store-bol: #0000A4;
  --fbt-store-amazon: #FF9900;
  --fbt-store-myprotein: #111111;
  --fbt-store-trainingfit: #00843D;
}