/* ============================================================
   DESIGN SYSTEM — Steam Region Change Service
   Premium gaming · dark · neon cyan/violet · glassmorphism
   ============================================================ */

:root {
  /* ---------- Color · Surface ---------- */
  --bg-base:        #14151c;
  --bg-deep:        #0e0f15;
  --bg-elev-1:      rgba(255, 255, 255, 0.05);
  --bg-elev-2:      rgba(255, 255, 255, 0.08);
  --bg-input:       rgba(15, 17, 24, 0.62);
  --bg-input-focus: rgba(15, 17, 24, 0.82);

  /* ---------- Color · Glass card ---------- */
  --glass-bg:       rgba(28, 30, 42, 0.62);
  --glass-bg-strong:rgba(28, 30, 42, 0.78);
  --glass-border:   rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-blur:     24px;

  /* ---------- Color · Text ---------- */
  --text-primary:   #f4f5fa;
  --text-secondary: #a8acbb;
  --text-tertiary:  #6b6f80;
  --text-disabled:  #4a4d5a;

  /* ---------- Color · Accent ---------- */
  --accent-cyan:    #06b6d4;
  --accent-cyan-2:  #22d3ee;
  --accent-violet:  #8b5cf6;
  --accent-violet-2:#a78bfa;
  --accent-grad:    linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-violet) 100%);
  --accent-grad-hover: linear-gradient(135deg, var(--accent-cyan-2) 0%, var(--accent-violet-2) 100%);

  /* ---------- Color · Semantic ---------- */
  --success:        #10d39a;
  --warning:        #f5b34a;
  --danger:         #ef4565;

  /* ---------- Color · Borders ---------- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-focus:   rgba(6, 182, 212, 0.55);

  /* ---------- Radius ---------- */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 22px;
  --radius-full:999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-card: 0 30px 80px -20px rgba(0,0,0,0.7),
                 0 8px 24px -8px rgba(0,0,0,0.5),
                 inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-cta-glow: 0 8px 28px -8px rgba(6,182,212,0.55),
                    0 8px 28px -8px rgba(139,92,246,0.45);
  --shadow-cta-glow-hover: 0 12px 40px -10px rgba(6,182,212,0.7),
                           0 12px 40px -10px rgba(139,92,246,0.6);
  --shadow-focus-ring: 0 0 0 3px rgba(6,182,212,0.18);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  32px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;

  /* ---------- Z-index ---------- */
  --z-bg:    0;
  --z-base:  1;
  --z-card:  10;
  --z-popup: 100;
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }
input  { font-family: inherit; }

/* ---------- Mobile / touch ---------- */
html, body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (hover: none) and (pointer: coarse) {
  /* iOS auto-zoom guard — never let inputs go below 16px on touch devices */
  input, textarea, select { font-size: max(16px, 1em); }
}
/* room at the bottom for the flow-nav demo widget on phones, plus iOS safe area */
@media (max-width: 600px) {
  .screen, .canvas { padding-bottom: calc(var(--space-7, 32px) + env(safe-area-inset-bottom, 0px) + 56px) !important; }
}
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
a {
  color: var(--accent-cyan-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--text-primary); }

/* ============================================================
   AMBIENT BACKGROUND — radial gradients + grid
   ============================================================ */
.ambient {
  position: fixed; inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background: var(--bg-base);
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.7;
}
.ambient::before {
  width: 60vmax; height: 60vmax;
  left: -20vmax; top: -25vmax;
  background: radial-gradient(circle, rgba(6,182,212,0.42), transparent 60%);
}
.ambient::after {
  width: 70vmax; height: 70vmax;
  right: -25vmax; bottom: -30vmax;
  background: radial-gradient(circle, rgba(139,92,246,0.36), transparent 60%);
}
.ambient-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ============================================================
   GLASS CARD
   ============================================================ */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
/* hairline gradient highlight on top edge */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.02) 30%,
    transparent 60%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}