/* ════════════════════════════════════════════
   QUANTUM-SPATIAL DESIGN TOKENS
   Shared across 9Bit Studios member product sites. */

:root {
  /* ── Background ── */
  --bg-void:         #010005;
  --bg-nebula:       #0A0621;
  --bg-twilight:     #131A36;
  --bg-midnight:     #1E1F5C;

--violet-primary: #7B00FF;          /* Primary action buttons */
--violet-hover: #8C45FF;            /* Hover state */
--violet-pressed: #6600D6;          /* Pressed state */
--violet-disabled: rgba(123, 0, 255, 0.4);

--rose-energy: #BF4080;
--rose-energy-hover: #D0196B;

/* Shadows - Liquid glass depth */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);

/* Viloet glow effects */
--glow-violet-sm: 0 0 20px rgba(123, 0, 255, 0.3);
--glow-violet-md: 0 0 40px rgba(123, 0, 255, 0.4);
--glow-lime-sm: 0 0 20px rgba(205, 255, 0, 0.2);


  /* ── Quantum-spatial accents ── */
  --cyan:            #5AC8FA;
  --violet:          #7B00FF;
  --violet-bright:   #7B3FFF;
  --violet-hi:       #9B6EFF;
  --violet-deep:     #3D1A6E;
  --magenta:         #BF4080;
  --gold:            #E9C46A;
  --success:         #34C759;
  --warning:         #FF9500;
  --danger:          #FF3B30;

  /* ── Text ── */
  --text-primary:    rgba(255,255,255,0.96);
  --text-secondary:  rgba(255,255,255,0.72);
  --text-tertiary:   rgba(255,255,255,0.48);

  /* ── Glass surfaces ── */
  --glass-bg:        rgba(10,6,33,0.65);
  --glass-bg-deep:   rgba(10,6,33,0.85);
  --glass-border:    rgba(97,63,231,0.10);
  --glass-border-hi: rgba(97,63,231,0.22);
  --glass-violet:    rgba(97,63,231,0.20);
  --glass-shimmer:   rgba(191,64,128,0.06);

  /* ── Dewdrop product palette (member: Tim Culpepper) ── */
  --dew-forest:      #2D6A4F;
  --dew-sage:        #52B788;
  --dew-terra:       #BC4749;
  --dew-cream:       #FEFAE0;
  --dew-charcoal:    #2C3E2D;
  --dew-muted:       #6B7C6D;
  --dew-healthy:     #D8F3DC;
  --dew-due-soon:    #FFE8A3;
  --dew-overdue:     #FFDAD6;

  /* ── Spacing ── */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px;

  /* ── Radius ── */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --r-pill: 9999px;

  /* ── Type ── */
  --font: -apple-system, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --type-display:  clamp(32px,5vw,52px);
  --type-title1:   28px;
  --type-title2:   22px;
  --type-headline: 17px;
  --type-body:     17px;
  --type-callout:  16px;
  --type-footnote: 13px;

  /* ── Layout (matched to oksana-site) ── */
  --section-y:     clamp(64px, 8vw, 96px);
  --section-x:     clamp(20px, 4vw, 48px);
  --gap:           clamp(16px, 2.5vw, 32px);
  --container-max: 1280px;

  /* ── Motion ── */
  --transition-base: 0.25s cubic-bezier(0.25,0.1,0.25,1);
  --transition-slow: 0.4s  cubic-bezier(0.25,0.1,0.25,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg-nebula);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient nebula wash — oil-slick depth (violet-dominant, cyan receded) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(97,63,231,0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(61,26,110,0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(191,64,128,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 15%, rgba(90,200,250,0.03) 0%, transparent 35%);
  pointer-events: none;
  z-index: 0;
}

.page { position: relative; z-index: 1; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--section-x);
}

section { padding: var(--section-y) 0; }
section + section { border-top: 1px solid rgba(255,255,255,0.06); }

/* ── Typography ── */
h1 { font-size: var(--type-display); font-weight: 700; letter-spacing: -1px;   line-height: 1.1; }
h2 { font-size: var(--type-title1);  font-weight: 700; letter-spacing: -0.5px; line-height: 1.2;  margin-bottom: var(--sp-2); }
h3 { font-size: var(--type-title2);  font-weight: 600; letter-spacing: -0.3px; line-height: 1.25; margin-bottom: var(--sp-1); }
h4 { font-size: var(--type-headline);font-weight: 600; letter-spacing: -0.2px; margin-bottom: 6px; }
p  { color: var(--text-secondary); margin-bottom: var(--sp-2); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: var(--sp-1);
}

a { color: var(--cyan); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--text-primary); }
/* Prevent nav-brand fade on hover */
.nav-brand:hover { opacity: 1; color: inherit; }