/*
 * Design tokens for the "Bedrock Equipment Co." theme (excavator-pro).
 * Shared by every template/CSS file in this theme and its WooCommerce overrides.
 * Do not redefine these values elsewhere — add new tokens here if a new one is needed.
 * Palette/typography direction: industrial B2B equipment retailer (inspired by prominiex.com's
 * structure: minimal white/gray canvas, dark authoritative text, high-contrast orange/red accents
 * for CTAs and discount badges).
 */

:root {
  /* Brand accent */
  --color-accent: #d9531e;         /* primary CTA / brand orange */
  --color-accent-dark: #b84316;
  --color-accent-light: #f5e2d8;

  --color-sale: #dc2626;           /* discount badges */
  --color-success: #16a34a;        /* in-stock / trust indicators */
  --color-warning: #d97706;

  /* Neutrals */
  --color-text: #1a1d21;           /* primary body/heading text */
  --color-text-muted: #5b6470;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f7;         /* section backgrounds */
  --color-border: #e4e7eb;
  --color-dark: #14161a;           /* footer / dark sections */
  --color-dark-text: #c9ced4;

  /* Typography */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;         /* hero slider headline */

  /* Desktop primary-nav menu-item text size — overridable from Appearance >
     Customize > Store Settings > Navigation (see excavator_pro_nav_menu_size()
     in inc/template-tags.php and the inline override in inc/customizer.php).
     Default matches --fs-sm, the original hardcoded value. */
  --nav-fs: var(--fs-sm);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --container-max: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 3px rgba(20, 22, 26, 0.08), 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-card-hover: 0 8px 20px rgba(20, 22, 26, 0.12);

  /* Motion: two easing curves cover every transition/animation in this theme
     instead of the bare `ease` keyword — an "entrance" curve (fast start,
     long soft settle — an ease-out-expo approximation) for anything fading/
     sliding/scaling into place (scroll-reveal, hero slide-ins, card hovers),
     and a snappier "feedback" curve for immediate press/hover response
     (buttons, arrows, dots) where the motion needs to read as instant, not
     eased. Durations are named by feel, not literal ms, so a future tweak
     changes one line instead of a find-and-replace across style.css. */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-feedback: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;

  /* Breakpoints (reference only — CSS vars can't be used in @media, kept here for consistency) */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px */
}