/* Layout tokens: rem + vw scale with zoom and viewport (phone → desktop). */

:root {
  /* Layout */
  --site-max-w: 80rem;
  --site-gutter: clamp(0.75rem, 2.5vw + 0.25rem, 2.25rem);
  --site-header-pad-y: clamp(0.75rem, 2vw, 1rem);
  --site-content-top: clamp(6.25rem, 10vw + 3.5rem, 8.75rem);
  --site-narrow-max: 59.375rem;
  --site-login-max: 33.75rem;

  /* Shared design tokens */
  --font-sans: "Manrope", system-ui, sans-serif;

  --text-high: #f8f4ff;
  --text-mid: #c9bfe0;
  --text-low: #8d82a6;
  --accent: #7ef4d7;
  --accent-2: #7ea8ff;
  --accent-warm: #ff6eb4;
  --accent-warm-soft: #ffb8de;
  --violet: #b894ff;
  --stroke: rgba(255, 255, 255, 0.14);
  --stroke-soft: rgba(255, 255, 255, 0.09);
  --bg-panel: rgba(22, 18, 36, 0.88);

  /* Body backdrop — deep purple-blue mesh with warm accent pools */
  --body-scene:
    radial-gradient(ellipse 80% 55% at 12% 8%, rgba(255, 110, 180, 0.18), transparent 52%),
    radial-gradient(ellipse 65% 42% at 88% 14%, rgba(184, 148, 255, 0.16), transparent 48%),
    radial-gradient(ellipse 50% 38% at 50% 95%, rgba(126, 244, 215, 0.08), transparent 42%),
    radial-gradient(ellipse 110% 70% at 50% -14%, rgba(90, 60, 140, 0.22), transparent 60%),
    linear-gradient(180deg, #0e0b1e 0%, #140f28 42%, #110e22 100%);

  /* Cards / shells */
  --panel-raised: linear-gradient(145deg, rgba(26, 22, 42, 0.96), rgba(18, 15, 32, 0.94));
  --panel-hero: linear-gradient(150deg, rgba(36, 26, 56, 0.94), rgba(20, 18, 36, 0.96));
  --panel-soft: linear-gradient(165deg, rgba(24, 20, 40, 0.93), rgba(16, 14, 30, 0.96));
  --surface-card: rgba(22, 20, 38, 0.88);

  /* Shared gradient for accent lines */
  --gradient-accent: linear-gradient(135deg, var(--accent-warm) 0%, var(--violet) 50%, var(--accent) 100%);

  /* Selection */
  --selection-bg: rgba(184, 148, 255, 0.32);
  --selection-color: #fff;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  height: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-color);
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
}