/*
 * Design tokens. The :root block below is extracted verbatim from the
 * original style.css — every existing value is unchanged. New token
 * groups (spacing/radius/duration/easing/z-index scales) are appended
 * after it, additive only, as part of Sprint 7's design system.
 *
 * @package TFGadgets
 */

:root{
  --bg:            #0d1016;
  --bg-alt:        #12151d;
  --bg-card:       #151922;
  --line:          #232834;
  --line-strong:   #333b4a;
  --text:          #e8ecf3;
  --text-muted:    #8993a6;
  --text-faint:    #747c8b;   /* Sprint 13: was #5c6577 (3.25:1 on --bg, fails WCAG AA 4.5:1 for normal text) — adjusted to the minimum lightening that reaches 4.53:1, verified computationally against sRGB relative luminance. */
  --accent:        #3f7cf6;   /* TFGadgets blue */
  --accent-soft:   #85aaff;
  --accent-2:      #aab6c8;   /* silver */
  --cat-1: #3f7cf6;   /* News — blue */
  --cat-2: #aab6c8;   /* Technology — silver */
  --cat-3: #6f8fff;   /* Reviews — periwinkle */
  --cat-4: #7c8798;   /* Tutorials — slate */
  --cat-5: #2f5fe0;   /* Buying Guides — deep blue */

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --container: 1220px;
  --gap: 28px;

  /* ---------------------------------------------------
     SPACING SCALE (Sprint 7)
     --gap (28px) above is kept as-is for backward
     compatibility — every existing rule that references
     var(--gap) keeps working unchanged. --space-6 below
     is a same-value alias so NEW code can use the numbered
     scale consistently; existing code doesn't need to
     change to benefit from this being documented.
  --------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 28px;  /* == --gap */
  --space-7: 40px;
  --space-8: 56px;

  /* ---------------------------------------------------
     BORDER RADIUS SCALE (Sprint 7)
     --radius-sm matches the 2px value already used by
     .author-box__avatar and the header action buttons —
     introduced as a token, not a new value. --radius-md
     and --radius-full are available for new components
     (e.g. Sprint 10's badge/pill patterns) but are not
     retroactively applied to any existing element, since
     this theme's flat/square-cornered look is a deliberate
     design choice (PROJECT_SPEC.md §23), not an oversight.
  --------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 999px;

  /* ---------------------------------------------------
     DURATION & EASING SCALE (Sprint 7)
     Every value here matches an already-in-use transition
     duration somewhere in the codebase — this is a naming
     pass over real, existing values, not new timing.
  --------------------------------------------------- */
  --duration-instant: 100ms;  /* reading-progress bar fill */
  --duration-fast:    150ms;  /* color/border hover transitions */
  --duration-base:    200ms;  /* mobile menu open/close */
  --duration-moderate:250ms;  /* header show/hide on scroll */
  --duration-slow:    400ms;  /* post-card image hover zoom */
  --duration-slower:  500ms;  /* hero image hover zoom */
  --ease-standard: ease;
  --ease-linear: linear;

  /* ---------------------------------------------------
     Z-INDEX SCALE (Sprint 7)
     Formalizes the stacking order that was already implicit
     across the codebase (skip-link above everything, overlay
     above header, header above dropdowns, dropdowns above
     page content) — same values, now named and centralized
     so a future addition can be placed correctly without
     guessing what number "wins".
  --------------------------------------------------- */
  --z-dropdown: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-skip-link: 1000;
}

/*
 * ---------------------------------------------------
 * RESPONSIVE BREAKPOINTS (documentation only)
 * ---------------------------------------------------
 * CSS custom properties cannot be referenced inside an
 * @media query's condition (a CSS Custom Media Queries
 * spec exists but isn't supported in any shipping browser
 * without a build-time polyfill, which this theme doesn't
 * use — see CONTRIBUTING.md's "no build step" note). These
 * two values are the canonical breakpoints; every file in
 * assets/css/ uses exactly one of them:
 *
 *   Tablet:  max-width: 980px
 *   Mobile:  max-width: 680px
 *
 * One documented exception: components/newsletter.css uses
 * max-width: 780px for its promo-band layout, because the
 * band's inline form needs a bit more room before stacking
 * makes sense than the grid components do. Changing it to
 * 680px to force artificial consistency would alter real
 * rendering in the 681-780px range — a visual regression
 * this sprint's "maintain current appearance" requirement
 * explicitly rules out — so it's kept and documented instead
 * of silently "fixed".
 */