/* ─────────────────────────────────────────────────────────────
   techwish.pl — design tokens
   Ported from /mockups/TW (1)/techwish-tokens.css
   ───────────────────────────────────────────────────────────── */

:root {
  /* Brand — mint accent */
  --tw-mint:     #2DCE92;
  --tw-mint-600: #1FB37C;
  --tw-mint-100: #DFF6EC;
  --tw-mint-050: #F1FAF5;

  /* Paper / surfaces */
  --tw-paper:     #FFFFFF;
  --tw-paper-2:   #F4F7F5;
  --tw-paper-3:   #E9EDEB;
  --tw-line:      #DDE3E0;
  --tw-line-soft: #ECEFED;

  /* Ink / text */
  --tw-ink:    #0B0F0D;
  --tw-ink-2:  #2A2F2C;
  --tw-mute:   #6B7470;
  --tw-mute-2: #98A09B;

  /* Glass — dark surfaces (footer, live overlay) */
  --tw-glass-900: #0E1311;
  --tw-glass-800: #141A17;
  --tw-glass-700: #1B221E;

  /* Radii */
  --tw-radius-sm: 6px;
  --tw-radius-md: 10px;
  --tw-radius-lg: 18px;
  --tw-radius-xl: 28px;

  /* Shadows */
  --tw-shadow-card:  0 1px 0 rgba(11,15,13,.04), 0 8px 24px -16px rgba(11,15,13,.10);
  --tw-shadow-hover: 0 1px 0 rgba(11,15,13,.06), 0 18px 40px -18px rgba(11,15,13,.18);

  /* Type families */
  --tw-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --tw-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* Type scale */
  --tw-fs-display: 84px;
  --tw-fs-h1:      56px;
  --tw-fs-h2:      38px;
  --tw-fs-h3:      22px;
  --tw-fs-h4:      16px;
  --tw-fs-body:    15px;
  --tw-fs-small:   13.5px;
  --tw-fs-eyebrow: 11px;

  /* Spacing scale (rem-based, 4px base) */
  --tw-space-1:  4px;
  --tw-space-2:  8px;
  --tw-space-3:  12px;
  --tw-space-4:  16px;
  --tw-space-5:  20px;
  --tw-space-6:  24px;
  --tw-space-8:  32px;
  --tw-space-10: 40px;
  --tw-space-12: 48px;
  --tw-space-16: 64px;
  --tw-space-20: 80px;
  --tw-space-24: 96px;

  /* Sticky offsets (JS sets --tw-chrome-top / --tw-sticky-top from .tw-site-chrome). */
  --tw-chrome-top: 76px;
  --tw-sticky-top: 76px;

  /* Z-index scale */
  --tw-z-header:   100;   /* .tw-site-chrome sticky stack */
  --tw-z-subnav:   99;    /* PDP section tabs — below header, above content */
  --tw-z-megamenu: 250;
  --tw-z-dock:     9000; /* mobile bottom nav */
  --tw-z-sheet:    9500;
  --tw-z-overlay:  10000; /* cart drawer, PDP lightbox, full-screen modals */
  --tw-z-modal:    10000;
  --tw-z-live:     10100;

  /* Container */
  --tw-container-max: 1320px;
  --tw-container-pad: 36px;

  /* Motion */
  --tw-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --tw-dur-fast: 0.18s;
  --tw-dur-med:  0.28s;
}

/* Honor reduced-motion users globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tw-dur-fast: 0s;
    --tw-dur-med:  0s;
  }
}

/* Root body class added by TW_Theme_Bridge::body_class() */
body.tw-root {
  font-family: var(--tw-display);
  color: var(--tw-ink);
  background: var(--tw-paper);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  letter-spacing: -0.005em;
  /* The bundled Space Grotesk / IBM Plex Mono webfonts may be absent (the
     assets/fonts/ dir ships empty until provisioned). Without this the browser
     SYNTHESISES bold/oblique from the system fallback, which — combined with
     letter-spacing — paints doubled / smeared glyphs on every bold heading.
     Disabling synthesis renders a clean single weight from the fallback. */
  font-synthesis: none;
}
body.tw-root *,
body.tw-root *::before,
body.tw-root *::after {
  box-sizing: border-box;
  font-synthesis: none;
  /* Salient's parent theme applies a text-shadow to headings/body in some
     skins, which reads as a doubled / offset "ghost" of the text. We never
     want it inside our components — kill it globally. */
  text-shadow: none !important;
}

/* Salient resets line-height to 0/1 on some elements; when our text wraps to a
   second line the lines then collapse ON TOP of each other (the "doubled"
   text). Guarantee a readable minimum line-height for text-bearing elements. */
body.tw-root p,
body.tw-root li,
body.tw-root span,
body.tw-root a,
body.tw-root small,
body.tw-root strong,
body.tw-root em,
body.tw-root h1,
body.tw-root h2,
body.tw-root h3,
body.tw-root h4,
body.tw-root h5,
body.tw-root h6 {
  line-height: 1.4;
}

/* Mega menu panels manage their own compact line metrics. */
body.tw-root .tw-mm li,
body.tw-root .tw-mm a {
  line-height: inherit;
}