/*
  Jaxon's Dealz brand token layer.
  Every color/type/spacing/motion value the rest of the CSS uses lives here —
  never hardcode a raw hex, px size, or easing curve outside this file.

  Contrast checked (WCAG): white/gold on black or charcoal all clear 8:1+;
  white text on the red button background clears 4.9:1. Gold is reserved for
  accents/buttons on dark surfaces — never gold text on a light background.
*/

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-Regular.cb05defe28c1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Regular.d0a8537b6034.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Medium.89bf6497e4f0.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-SemiBold.fb488fede66b.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("../fonts/Barlow-Bold.2e1a8aafb8d3.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --jd-black: #0a0a0a;
  --jd-charcoal: #1a1a1a;
  --jd-charcoal-raised: #232323;
  --jd-charcoal-line: #333333;
  --jd-red: #d4171f;
  --jd-red-dark: #9c0f16;
  --jd-gold: #f5a623;
  --jd-gold-deep: #d88c0f;
  --jd-white: #f7f7f5;
  --jd-white-dim: #c7c7c3;

  /* Typography */
  --jd-font-display: "Anton", "Arial Narrow", sans-serif;
  --jd-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --jd-size-h1: clamp(2.5rem, 6vw + 1rem, 5rem);
  --jd-size-h2: clamp(1.9rem, 4vw + 0.5rem, 3rem);
  --jd-size-h3: clamp(1.4rem, 2vw + 0.5rem, 1.9rem);
  --jd-size-body: 1rem;
  --jd-size-small: 0.875rem;

  /* Spacing scale (4px base) */
  --jd-space-1: 0.25rem;
  --jd-space-2: 0.5rem;
  --jd-space-3: 1rem;
  --jd-space-4: 1.5rem;
  --jd-space-5: 2.5rem;
  --jd-space-6: 4rem;
  --jd-space-7: 6rem;
  --jd-section-padding: clamp(3rem, 8vw, 6rem);

  /* Motion */
  --jd-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* "Gavel-strike": fast punch-in with a small overshoot then settle — used for
     section reveals instead of a generic fade/rise. See assets/js/motion.js. */
  --jd-ease-gavel: cubic-bezier(0.2, 1.4, 0.4, 1);
  --jd-duration-fast: 150ms;
  --jd-duration-standard: 350ms;
  --jd-duration-gavel: 420ms;

  /* Layout */
  --jd-radius: 6px;
  --jd-max-width: 1280px;
  /* Tall enough to fully contain BOTH the "View Deals" pill (max 88px) and
     the logo badge: the logo renders at clamp(84px, 11vw, 132px) high (see
     .jd-header__logo img in site.css), so the bar is that same clamp plus
     20px of breathing room — the logo always sits ~10px inside the bar at
     every viewport width, nothing overflows, and the sticky header has
     nothing to clip once scrolled. */
  --jd-header-height: clamp(104px, 11vw + 20px, 152px);

  /* Hard-edged offset white shadow behind bold accent text (red or gold),
     poster/sticker-style, so it "pops" against the dark background instead of
     receding at small sizes. Uses em units so the offset scales with whatever
     font-size it's applied to, rather than needing a different value per
     element. Tight offset on purpose — this is a lift, not a white halo — but
     bright enough at this opacity to actually read as a highlight next to the
     dark background, not just a faint edge. */
  --jd-pop-shadow: 0.03em 0.04em 0 rgba(247, 247, 245, 0.8);

  color-scheme: dark;
}

/* Breakpoints are pinned to exactly these three values across all of assets/css/.
   A test enforces this — see core/tests.py
   test_css_breakpoints_are_pinned_to_the_agreed_set. (Desktop scaling is
   continuous, not breakpoint-based — see "Dynamic desktop zoom" in site.css.) */