/* ==========================================================================
   1. ROOT VARIABLES (Design Tokens)
   ========================================================================== */
:root {
  /* --- Backgrounds --- */
  --color-bg-primary: #000000;
  --color-bg-secondary: #141414;
  --color-bg-secondary-transparent: #14141466;
  --color-bg-light: #f5f5f5;
  --color-bg-light-transparent: #f5f5f566;
  --color-bg-footer: #ffffff80;
  --color-bg-secondary-light: #262626; /* --- Text --- */
  --color-text-primary: #ffffff;
  --color-text-secondary: #737373;
  --color-border-hover: #7373734d;
  --color-text-secondary-transparent: #73737399;
  --color-text-muted: #e6e6e6;
  --color-text-muted2: #e6e6e680;
  --color-text-navbutton: #e6e6e699;
  --color--product-card-atc-hover: #141414e6;
  --color-border: #e6e6e6;
  --color-outline: #14141480;
  --color-bg-lock: #1414141a; /* --- Status (product stock, BRD 3.3.4) --- */
  --color-status-in-stock: #4ade80;
  --color-status-restocking: #facc15;
  --color-status-out-of-stock: #ef4444;

  /* --- Feedback --- */
  --color-success: #4ade80;
  --color-error: #ef4444;

  /* --- Fonts --- */
  --font-heading: "Inter Tight", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* --- Spacing Scale --- */
  --space-1: 4px;
  --space-11: 6px;
  --space-2: 8px;
  --space-13: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 2rem;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 5rem;

  --radius: 0.375rem;
  /* --- Layout --- */
  --container-max: 80rem;
  --container-pad: 1rem;
  --section-pad: 60px;

  --container-2xl: 64rem;

  /* --- Surface (light cards on dark bg) --- */
  --color-surface: #ffffff;
  --color-surface-text: #141414;
  --color-surface-muted: #f5f5f5;
  --color-surface-product-card: #f5f5f54d;

  /* --- Accent (amber — spec labels, stock bar, storage/sequence values) --- */
  --color-accent: #f59f0a;

  --tw-space-y-reverse: 0;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

  /* --- Transitions (BRD: no animations beyond subtle state changes) --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* --- Z-index --- */
  --z-age-gate: 999999;
  --z-nav: 100;
  --z-dropdown: 50;

  /* --- Header --- */
  --header-height: 3.5rem;

  /* --- Font Size Scale ---
     Use these instead of hardcoded rem values so mobile breakpoint below
     can scale the entire type system by changing one :root block.
  */
  --fs-display: 1.875rem; /* large numbers: product price, page hero titles */
  --fs-h1: 1.75rem; /* page titles: calculator, COA */
  --fs-h2: 1.5rem; /* section headings: featured products, calc results */
  --fs-h3: 1.375rem; /* medium headings */
  --fs-h4: 1.25rem; /* sub-headings: cart grand total */
  --fs-h5: 1.125rem; /* smallest headings: related title, article title */
  --fs-body-lg: 1rem; /* large body: sub-headings in context */
  --fs-body: 0.9375rem; /* standard body */
  --fs-sm: 0.875rem; /* secondary body (most common) */
  --fs-xs: 0.8125rem; /* small body: buttons, small labels */
  --fs-2xs: 0.75rem; /* captions, field labels */
  --fs-3xs: 0.6875rem; /* micro labels, tags */
}

/* ==========================================================================
   1b. MOBILE FONT SIZE OVERRIDES
   Changing these 12 variables scales the entire type system at ≤767px.
   Components use var(--fs-*) so no specificity fights.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-display: 1.375rem;
    --fs-h1: 1.25rem;
    --fs-h2: 1.125rem;
    --fs-h3: 1rem;
    --fs-h4: 0.9375rem;
    --fs-h5: 0.9375rem;
    --fs-body-lg: 0.9375rem;
    --fs-body: 0.875rem;
    --fs-sm: 0.8125rem;
    --fs-xs: 0.75rem;
    --fs-2xs: 0.6875rem;
    --fs-3xs: 0.625rem;
  }
}

/* ==========================================================================
   2. RESPONSIVE BREAKPOINTS
   ========================================================================== */
/*
  sm:  640px   — large phones landscape
  md:  768px   — tablets
  lg:  1024px  — small desktops
  xl:  1280px  — 80rem container fills at this width
*/

/* ==========================================================================
   3. BASE RESET
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The hidden attribute must always win over component display rules
   (e.g. display:flex), so JS toggling [hidden] reliably shows/hides. */
[hidden] {
  display: none !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ==========================================================================
   4. BODY
   ========================================================================== */
body {
  /* background-color: var(--color-bg-primary); */
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
}

/* ==========================================================================
   5. LAYOUT
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--section-pad) 0;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}

.btn:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-text-primary);
}

.btn-primary:hover {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-outline:hover {
  background-color: var(--color-text-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-text-primary);
}

/* ==========================================================================
   7. LINKS
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--transition-base),
    text-decoration-color var(--transition-base);
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-text-secondary);
}

/* ==========================================================================
   8. FORM INPUTS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  width: 100%;
  border-radius: 0;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-text-secondary);
  box-shadow: 0 0 0 1px var(--color-text-secondary);
}

::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}