/* Design tokens for Aurum. Values mirror the original styles 1:1 so the look stays identical. */
:root {
  /* Palette */
  --bg: #02030a;
  --bg-elevated: #070915;
  --bg-deep: #02040b;
  --panel-solid: #10111c;

  --text: #f9f1ff;
  --text-strong: #fff7ff;
  --text-soft: #c9c0d3;
  --muted: #a99eb0;
  --muted-soft: #9c94aa;

  --purple: #b849ff;
  --purple-bright: #d189ff;
  --purple-soft: #dac8ec;
  --blue: #5eb8ff;
  --gold: #d6a762;
  --gold-bright: #ffd98b;
  --green: #20e650;
  --danger: rgb(255 82 118 / 42%);
  --danger-text: #ffb4c3;

  /* Borders */
  --border-panel: rgb(126 85 170 / 28%);
  --border-input: rgb(113 82 143 / 45%);
  --border-chip: rgb(191 100 255 / 30%);
  --border-soft: rgb(107 93 126 / 34%);
  /* Neutral hairline + subtle fill tokens. Scoped overrides (e.g. `.account`)
     may redefine these, but they must resolve globally so controls outside the
     cabinet (profile/salon CTA ghost buttons) keep a visible border and fill. */
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 14%);
  --fill: rgb(255 255 255 / 2.5%);
  --fill-hover: rgb(255 255 255 / 4.5%);

  /* Surfaces */
  --grad-panel: linear-gradient(135deg, rgb(18 20 38 / 92%), rgb(9 12 24 / 92%));
  --grad-toolbar: linear-gradient(135deg, rgb(18 20 38 / 88%), rgb(9 12 24 / 88%));
  --surface-input: rgb(17 20 36 / 82%);
  /* Glassy translucent fill for text fields — mirrors the registration card inputs. */
  --surface-field: rgb(255 255 255 / 4%);
  --surface-chip: rgb(126 64 255 / 14%);
  --surface-glass: rgb(8 11 22 / 90%);

  /* Shadows and glows */
  --shadow-panel: 0 18px 48px rgb(0 0 0 / 32%);
  --shadow-card: 0 18px 48px rgb(0 0 0 / 42%);
  --shadow-pop: 0 28px 80px rgb(0 0 0 / 58%);
  --glow-purple: 0 0 24px rgb(173 65 255 / 36%);
  --inset-soft: inset 0 0 18px rgb(255 255 255 / 3%);

  /* Radii */
  --radius-pill: 999px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-card: 22px;
  --radius-lg: 24px;
  --radius-xl: 28px;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 24px;
  --grid-gap: clamp(12px, 2vw, 22px);

  /* Breakpoints (canonical — use these literals in @media, not var()):
     sm 480px | md 768px | lg 1024px | xl 1440px */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* Safe-area insets (iOS/Android notch) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Dynamic viewport height fallback chain */
  --vh-full: 100vh;
  --vh-full: 100dvh;

  /* Footprint of the floating fixed bottom nav (height + bottom offset + gap).
     Used to keep sticky side panels from being hidden behind it. */
  --bottom-nav-space: calc(104px + var(--safe-bottom));

  /* Real sticky-header height, published from JS (SiteHeader). Fallback covers
     SSR/first paint before the measurement runs. */
  --header-h: 96px;

  /* Vertical offset that clears the sticky site header, so sticky side panels
     (cabinet previews, «К оплате») never slide under it while scrolling.
     8px — top offset шапки, 12px — визуальный зазор. */
  --sticky-top-clearance: calc(var(--header-h) + 20px);

  /* Typography */
  --font-sans: Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
  --step-0: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  --step-1: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.75vw, 2.625rem);

  /* Z-index scale */
  --z-bottom-nav: 10;
  --z-header: 12;
  --z-modal: 20;
  --z-agegate: 30;
  --z-lightbox: 60;
}