/* =====================================================================
   Dropio — Colors & Type
   Brand: Dropio (price tracker for consumers)
   Voice: NL — "De slimste manier om prijzen te tracken."
   ===================================================================== */

/* Webfonts: Poppins (display) + Inter (body)
   Loaded from Google Fonts — no local font files were provided.
   The <link rel="stylesheet"> in templates/_base.html handles the fetch with
   preconnect-warmed origin; importing here would create a second waterfall
   request and delay LCP. See README.md → "Type substitutions" if you want to
   swap to local TTFs. */

:root {
  /* ---------- Brand palette (from brand guidelines) ---------- */
  --dropio-navy:        #0D1B2A;   /* Deep Navy — primary ink, headlines    */
  --dropio-orange:      #FF6A00;   /* Orange — primary action, flame logo   */
  --dropio-orange-soft: #FFA633;   /* Light Orange — chart fill, accents    */
  --dropio-sand:        #F4EFE7;   /* Warm Sand — soft surface, backgrounds */
  --dropio-gray:        #E6E6E6;   /* Soft Gray — borders, dividers         */
  --dropio-white:       #FFFFFF;

  /* ---------- Extended neutrals (derived, not in guidelines) ---------- */
  --dropio-ink-1:       #0D1B2A;   /* primary text                          */
  --dropio-ink-2:       #4A5563;   /* secondary text / labels               */
  --dropio-ink-3:       #8A92A0;   /* tertiary / metadata                   */
  --dropio-ink-4:       #B8BDC6;   /* disabled / placeholder                */
  --dropio-line:        #ECECEC;   /* hairline borders inside cards         */
  --dropio-surface-1:   #FFFFFF;   /* card                                  */
  --dropio-surface-2:   #FAFAFA;   /* page                                  */
  --dropio-surface-3:   #F4EFE7;   /* warm hero / promo                     */
  --dropio-surface-4:   #FFF1E0;   /* faint orange wash                     */

  /* ---------- Semantic ---------- */
  --dropio-success:     #18A957;   /* price drop / positive                 */
  --dropio-success-bg:  #E6F6EC;
  --dropio-warning:     #FFA633;
  --dropio-danger:      #E5484D;
  --dropio-info:        #2A6FDB;

  /* Foreground roles */
  --fg-1: var(--dropio-ink-1);
  --fg-2: var(--dropio-ink-2);
  --fg-3: var(--dropio-ink-3);
  --fg-4: var(--dropio-ink-4);
  --fg-on-orange: #FFFFFF;
  --fg-on-navy:   #FFFFFF;

  /* Background roles */
  --bg-page:    var(--dropio-surface-2);
  --bg-card:    var(--dropio-surface-1);
  --bg-warm:    var(--dropio-surface-3);
  --bg-orange:  var(--dropio-orange);
  --bg-navy:    var(--dropio-navy);

  /* ---------- Type families ---------- */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter",   ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  /* ---------- Type scale (mobile-first; bumps on desktop below) ---------- */
  --fs-display:  36px;   --lh-display:  1.10;  --tr-display: -0.02em;
  --fs-h1:       28px;   --lh-h1:       1.15;  --tr-h1:      -0.02em;
  --fs-h2:       22px;   --lh-h2:       1.20;  --tr-h2:      -0.015em;
  --fs-h3:       18px;   --lh-h3:       1.30;  --tr-h3:      -0.01em;
  --fs-h4:       16px;   --lh-h4:       1.35;  --tr-h4:      -0.005em;
  --fs-body:     16px;   --lh-body:     1.55;  --tr-body:     0;
  --fs-body-sm:  14px;   --lh-body-sm:  1.50;
  --fs-caption:  12px;   --lh-caption:  1.40;  --tr-caption:  0.01em;
  --fs-overline: 11px;   --lh-overline: 1.20;  --tr-overline: 0.08em;

  /* ---------- Spacing (8px base, with 4 + 2 micro steps) ---------- */
  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 20px;
  --s-7: 24px;
  --s-8: 32px;
  --s-9: 40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;     /* chips, small pills          */
  --r-sm: 10px;    /* inputs, secondary buttons   */
  --r-md: 14px;    /* primary buttons             */
  --r-lg: 20px;    /* cards                       */
  --r-xl: 28px;    /* large feature cards         */
  --r-pill: 999px; /* tab pills, toggles          */

  /* ---------- Shadows (soft, warm-tinted) ---------- */
  --shadow-1: 0 1px 2px rgba(13, 27, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(13, 27, 42, 0.06);
  --shadow-3: 0 12px 28px rgba(13, 27, 42, 0.08);
  --shadow-4: 0 24px 60px rgba(13, 27, 42, 0.12);
  --shadow-orange: 0 8px 24px rgba(255, 106, 0, 0.28);

  /* ---------- Borders ---------- */
  --border-hair: 1px solid var(--dropio-line);
  --border-soft: 1px solid var(--dropio-gray);
  --border-strong: 1.5px solid var(--dropio-ink-1);

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

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* Tablet bumps (640px+) */
@media (min-width: 640px) {
  :root {
    --fs-display: 48px;
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
  }
}

/* Desktop bumps */
@media (min-width: 900px) {
  :root {
    --fs-display: 72px;
    --fs-h1: 56px;
    --fs-h2: 40px;
    --fs-h3: 28px;
    --fs-h4: 20px;
  }
}

/* =====================================================================
   Semantic type classes — use these instead of bare font-size.
   ===================================================================== */

.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-body-strong {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  color: var(--fg-3);
}
.t-overline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* The signature "highlighted word" treatment — words colored orange in headlines
   ("De slimste manier om prijzen te tracken."). */
.t-accent {
  color: var(--dropio-orange);
}

/* Price text — tabular numerics for stable column alignment. */
.t-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}