/* 9Bit Studios Brand Tokens */

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

  /* ── Foundation accents ── */
  --cyan:            #5AC8FA;
  --violet:          #613FE7;
  --violet-bright:   #7B3FFF;
  --magenta:         #BF4080;
  --gold:            #E9C46A;
  --success:         #34C759;
  --warning:         #FF9500;
  --danger:          #FF3B30;

  /* ── Text (Apple NSColor label hierarchy) ── */
  --text-primary:    rgba(255,255,255,0.85);
  --text-secondary:  rgba(255,255,255,0.55);
  --text-tertiary:   rgba(255,255,255,0.25);
  --text-quaternary: rgba(255,255,255,0.10);

  /* ── Glass surfaces ── */
  --glass-bg:        rgba(10,6,33,0.60);
  --glass-bg-deep:   rgba(10,6,33,0.82);
  --glass-border:    rgba(90,200,250,0.12);
  --glass-border-hi: rgba(90,200,250,0.28);

  /* ── 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: 'SF Pro', -apple-system, BlinkMacSystemFont, 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);

  /* ═══ BRAND TOKEN LAYERS ═══ */

  /* ── 9Bit Studios (hub) ── */
  --9bit-plum:       #0B010D;
  --9bit-purple:     #BF5AF2;
  --9bit-gold:       #E4C06A;
  --9bit-purple-dim: rgba(191,90,242,0.15);

  /* ── Oksana (platform) ── */
  --oks-void:        #0A0621;
  --oks-violet:      #613FE7;
  --oks-cyan:        #5AC8FA;
  --oks-violet-dim:  rgba(97,63,231,0.15);

  /* ── Dewdrop (member product — 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;
  --dew-sage-dim:    rgba(82,183,136,0.15);
}

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

/* Deep ultramarine liquid melted glass, fixed across all pages */
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, fixed across all pages */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(97,63,231,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 75%, rgba(90,200,250,0.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(191,64,128,0.05) 0%, transparent 55%);
  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: 590; letter-spacing: -0.3px; line-height: 1.25; margin-bottom: var(--sp-1); }
h4 { font-size: var(--type-headline);font-weight: 590; 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: 590; 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; }