/* responsive.css — mobile foundation layer.
   Linked AFTER styles.css in every HTML shell.
   Uses mobile tokens defined in tokens/spacing.css. */

/* ---- Spacing token switch ---- */
@media (max-width: 767px) {
  :root {
    --page-margin: var(--page-margin-mobile, 20px);
    --grid-gutter: var(--grid-gutter-mobile, 16px);
  }
}

/* ---- Fluid type tokens ----
   Removes the inline-style dependency so media queries / clamp work.
   All sizes scale by --lu-tscale (tweak panel multiplier).
   Desktop maxima match the old TYPE_TOKENS map;
   mobile minima from DESIGN-SYSTEM.md type table. */
:root {
  --size-h1:      calc(clamp(36px, 5.6vw, 64px) * var(--lu-tscale, 1));
  --size-h2:      calc(clamp(28px, 4vw, 44px) * var(--lu-tscale, 1));
  --size-h3:      calc(clamp(20px, 2.4vw, 24px) * var(--lu-tscale, 1));
  --size-h4:      calc(clamp(18px, 2vw, 20px) * var(--lu-tscale, 1));
  --size-body:    calc(clamp(16px, 1.6vw, 18px) * var(--lu-tscale, 1));
  --size-body-sm: calc(clamp(14px, 1.4vw, 15px) * var(--lu-tscale, 1));
  --size-metric:  calc(clamp(28px, 3.4vw, 36px) * var(--lu-tscale, 1));
  --size-quote:   calc(clamp(20px, 2.4vw, 24px) * var(--lu-tscale, 1));
}

/* ---- Hero (svh fallback) ---- */
.lu-hero {
  min-height: 92vh;
  min-height: 92svh;
}

/* ---- Simplified aurora on mobile ----
   Reduce gradient count and disable animation to spare mobile GPUs. */
@media (max-width: 767px) {
  .lu-hero-wash {
    background:
      radial-gradient(ellipse at 40% 50%, rgba(168,85,247,0.15) 0%, transparent 60%);
    background-size: 100% 100%;
    animation: none !important;
  }
}

/* ---- Prevent hidden absolute-positioned tooltips from creating scroll ---- */
html { overflow-x: clip; }

/* ---- Tweaks panel: hidden on mobile (production) ---- */
@media (max-width: 767px) {
  .twk-panel { display: none !important; }
}