/* ================================
   EGO HACKERS DESIGN SYSTEM
   From Opus Complete Component Library (2025-12-23)
   For ReadsMe FastAPI Platform
   ================================ */

/* ================================
   CORE DESIGN TOKENS
   ================================ */
:root {
    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Typography */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;

    /* Fonts */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'Source Serif 4', 'Source Serif 4 Fallback', Georgia, serif;
    --font-ui: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Aliases for legacy references */
    --font-serif: var(--font-body);
    --font-sans: var(--font-ui);

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line heights */
    --leading-tight: 1.15;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-sidebar: 400;
    --z-modal-backdrop: 500;
    --z-modal: 600;
    --z-popover: 700;
    --z-toast: 800;
    --z-overlay: 900;
    --z-max: 1000;

    /* Accent gradient (green room, onboarding) — warm book tones */
    --color-accent-start: #8B7355;
    --color-accent-end: #5C4A32;
}

/* ================================
   BASE TYPOGRAPHY (Opus Design)
   Improved font rendering
   ================================ */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Headings use display font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-normal);
    line-height: var(--leading-tight);
}

/* Book content uses body serif font */
.book-content,
.book-content p,
.book-content li {
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
}

/* UI elements use UI font */
button, input, select, textarea {
    font-family: var(--font-ui);
}

/* Chat messages use UI font (sans-serif) */
.message-content,
.chat-input,
.chat-panel {
    font-family: var(--font-ui);
}