/* ==========================================================================
   INSAVE HUB — DESIGN TOKENS & TYPOGRAPHY SYSTEM
   Original Glass Orbit Visual Identity — Sky Blue & White Gradient Edition
   ========================================================================== */

:root {
  /* Luminous Sky Blue & White Gradient Surfaces */
  --bg-void: #E8F5FE;
  --bg-obsidian: #F0F9FF;
  --bg-elevated: #FFFFFF;
  --bg-surface-1: rgba(255, 255, 255, 0.68);
  --bg-surface-2: rgba(240, 249, 255, 0.78);
  --bg-surface-3: rgba(224, 242, 254, 0.65);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);

  /* Specular White & Sky-Blue Refraction Borders */
  --border-hairline: rgba(14, 165, 233, 0.18);
  --border-illuminated: rgba(2, 132, 199, 0.28);
  --border-refraction-top: rgba(255, 255, 255, 0.96);
  --border-cyan-glow: rgba(14, 165, 233, 0.58);
  --border-violet-glow: rgba(56, 189, 248, 0.48);

  /* Sky Blue & White Ambient Lighting Palette */
  --light-cyan: #0284C7;
  --light-blue: #0EA5E9;
  --light-violet: #38BDF8;
  --light-silver: #FFFFFF;
  --light-emerald: #059669;
  --light-amber: #D97706;
  --light-rose: #E11D48;

  /* High-Contrast Editorial Typography on Sky-Blue & White Glass */
  --text-primary: #0B2545;
  --text-secondary: #1E3F66;
  --text-muted: #4A6FA5;
  --text-dim: #6B8EAD;

  /* Multi-Layer Backdrop Blur */
  --blur-sm: blur(12px) saturate(150%);
  --blur-md: blur(22px) saturate(170%);
  --blur-lg: blur(36px) saturate(185%);

  /* Sky-Blue & Specular White Architectural Shadows */
  --shadow-ambient: 0 22px 54px -12px rgba(2, 132, 199, 0.18);
  --shadow-panel:
    0 14px 36px -8px rgba(14, 165, 233, 0.14),
    0 4px 12px -2px rgba(2, 132, 199, 0.07),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-interactive:
    0 20px 44px -10px rgba(14, 165, 233, 0.26),
    inset 0 1px 2px 0 rgba(255, 255, 255, 1);

  /* Typography Families */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Modular Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3.25rem;
  --space-16: 4.5rem;
  --space-20: 6rem;

  /* Controlled Structural Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Motion Curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-normal: 280ms;
  --duration-slow: 520ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #DFF2FE 0%, #F2FAFF 35%, #FFFFFF 65%, #CBEBFE 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--light-cyan);
  outline-offset: 2px;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}