/*
 * tech-storefront — design tokens (Balanced + Regular + Light only)
 *
 * Prototype source could not be fetched from the daemon; this file is written
 * from scratch using the minimum-required tokens documented in T-097.
 * Refined / Power variants, dark mode, and density tweaks are intentionally
 * out of scope and MUST NOT be added here.
 *
 * T-098 / T-101 will layer surface-specific styles into their own files
 * (header.css, home.css, etc.). Keep this file as pure tokens + reset.
 */

:root {
  --brand: #EC6E4D;
  --accent: #4DAAA7;
  --accent-2: #F4B94E;
  --ink: #0F1014;
  --ink-2: #3A3D44;
  --ink-3: #6B6F78;
  --paper: #FFFFFF;
  --paper-2: #F7F6F2;
  --line: #E8E6DF;
  --line-2: #DCD9CF;
  --shadow: 0 8px 24px rgba(15,16,20,0.06);
  --shadow-lg: 0 16px 48px rgba(15,16,20,0.10);
  --radius: 14px;
  --radius-sm: 8px;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Soft tints — used for hover/badge backgrounds across header, footer, home. */
  --brand-soft:    rgba(236, 110, 77, 0.12);
  --accent-soft:   rgba( 77, 170, 167, 0.12);
  --accent-2-soft: rgba(244, 185, 78, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--ink); margin: 0 0 .5em; line-height: 1.2; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem; }

@media (max-width: 900px) {
  .site-main { padding: 1rem .75rem; }
}

/* T-116: Hide leftover Electro Christmas ribbon strip. The body-level
 * #xmas-ribbon-bar div is injected by a legacy WPCode snippet (post ID 115716)
 * and shows a gradient under the header. Out of scope for the new theme. */
#xmas-ribbon-bar,
body > #xmas-ribbon-bar {
  display: none !important;
}

/* T-132: prevent horizontal scroll on mobile.
 * Off-canvas/fixed elements (drawer, mega menu, filter sheet, sticky FABs) can push
 * body width past viewport. Lock at the root. */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.mobile-drawer,
.mobile-drawer-bg,
.mega-menu,
.mega-menu-bg,
.filter-sheet,
.filter-sheet-bg,
.tm-mobile-buybar,
.tm-filter-fab,
.filter-fab,
.oos-modal {
  max-width: 100vw;
}

.mobile-drawer {
  position: fixed !important;
  right: 0;
  top: 0;
  /* no contain — was breaking fixed positioning when scrolled */
}