:root {
    --bg-primary: #07080D;
    --bg-secondary: #0D1018;
    --bg-card: #111521;
    --bg-glass: rgba(255, 255, 255, 0.05);

    --primary: #6366F1;
    --primary-light: #8B5CF6;
    --accent: #22D3EE;
    --accent-pink: #EC4899;

    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);

    --gradient-main: linear-gradient(135deg, #6366F1, #8B5CF6, #22D3EE);
    --gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.10), rgba(34, 211, 238, 0.12));
    --gradient-glow: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.35), rgba(139, 92, 246, 0.12) 55%, transparent 75%);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.30);
    --shadow-lift: 0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-glow-primary: 0 0 32px rgba(99, 102, 241, 0.35);
    --shadow-glow-accent: 0 0 28px rgba(34, 211, 238, 0.28);

    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-flip: cubic-bezier(0.645, 0.045, 0.355, 1);

    --z-bg: 0;
    --z-stage: 10;
    --z-page-base: 20;
    --z-flipping: 200;
    --z-navbar: 500;
    --z-menu: 600;
    --z-booknav: 500;
    --z-modal: 800;
    --z-loader: 900;
    --z-cursor: 1000;

    --nav-height: 76px;
    --booknav-height: 88px;

    --stage-h: calc(100dvh - var(--nav-height) - var(--booknav-height) - 24px);
    --page-h: min(var(--stage-h), 780px);
    --page-w: min(calc(var(--page-h) * 0.72), 46vw);
}