/* ═══════════════════════════════════════════════════
   Bloom Design Tokens v2
   ═══════════════════════════════════════════════════ */

/* Font loading */
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/ClashDisplay-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/ClashDisplay-Semibold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/ClashDisplay-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/ClashDisplay-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('/assets/fonts/ClashDisplay-Light.otf') format('opentype'); font-weight:300; font-display:swap; }

:root {
  /* ── Brand constants (never theme-switch) ── */
  --near-black:   #1a0f27;
  --deep-purple:  #2D1B3D;
  --violet:       #AD40FE;
  --mint:         #D3F2B4;
  --cream:        #FAF6EE;
  --amber:        #E8A020;
  --sage:         #9B8AB8;

  /* ── Light theme surfaces ── */
  --bg:           #F4EFF8;
  --surface:      #FFFFFF;
  --surface-2:    #FAF6EE;
  --surface-3:    #EDE8F5;
  --ink:          #2D1B3D;
  --ink-2:        rgba(45,27,61,0.70);
  --muted:        rgba(45,27,61,0.45);
  --faint:        rgba(45,27,61,0.25);
  --border:       rgba(45,27,61,0.10);
  --border-mid:   rgba(45,27,61,0.18);

  /* ── Nav ── */
  --nav-bg:       #2D1B3D;
  --nav-ink:      rgba(250,246,238,0.92);
  --nav-muted:    rgba(250,246,238,0.45);
  --nav-faint:    rgba(250,246,238,0.22);

  /* ── Geometry ── */
  --rail-w:       244px;
  --rail-w-col:   64px;
  --topbar-h:     52px;
  --r-sm:         8px;
  --r-md:         12px;
  --r-lg:         18px;
  --r-xl:         24px;

  /* ── Motion ── */
  --t-fast:       120ms ease;
  --t-med:        200ms ease-out;
  --t-rail:       180ms ease;
}

html.dark {
  --bg:           #13091f;
  --surface:      #1f112e;
  --surface-2:    #261637;
  --surface-3:    #2D1B3D;
  --ink:          #FAF6EE;
  --ink-2:        rgba(250,246,238,0.78);
  --muted:        rgba(250,246,238,0.48);
  --faint:        rgba(250,246,238,0.25);
  --border:       rgba(173,64,254,0.14);
  --border-mid:   rgba(173,64,254,0.28);
  --nav-bg:       #0f0820;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1,h2,h3,h4 { font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--ink); }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbars ── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }

/* ── Font utilities ── */
.clash { font-family: 'Clash Display', sans-serif; }
.serif { font-family: 'Cormorant Garamond', serif; }
.mono  { font-family: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace; }

/* ── App shell layout ── */
#app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
#app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
#page-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}