/* === Design System Variables (from wireframe) === */
:root {
    /* Typography */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size: 16px; /* base */
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    --main-font: 'Silkscreen', cursive;
    --heading-font: 'Luckiest Guy', cursive;
    --body-font: 'Atkinson Hyperlegible', sans-serif;
    --dyslexia-font: 'Comic Neue', cursive;

    /* Utility font aliases for clarity */
    --font-heading: var(--heading-font);
    --font-body: var(--body-font);
    --font-ui: var(--main-font);

    /* Color Palette - Hearth & Ink Scheme */
    /* Color Palette - Hearth & Ink Scheme */
    --background: #E0D8C3; /* Darker Parchment (Base Layer) */
    --foreground: #1A2B3C; /* Oxford Navy */
    --card: #F2EAD3; /* Warm Parchment (Popping forward) */
    --card-foreground: #1A2B3C;
    --primary: #BC6D4F; /* Terracotta Clay */
    --primary-foreground: #FFFFFF; /* High Contrast White for accessible buttons */
    --secondary: #7A9A88; /* Cotswold Sage */
    --secondary-foreground: #1A2B3C;
    --muted: #D6CDB6; /* Even Darker Parchment */
    --muted-foreground: #4A5B6C; /* Darker Muted Navy */
    --accent: #D4AF37; /* Antique Brass */
    --accent-foreground: #1A2B3C;
    --success: #7A9A88; /* Cotswold Sage */
    --warning: #D4AF37; /* Antique Brass */
    --error: #e74c3c;
    --info: #2196f3;
    --border: #1A2B3C; /* Oxford Navy (Stroke) */

    /* Spacing & Radius */
    --radius: 8px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;

    /* Sidebar */
    --sidebar: var(--primary);
    --sidebar-foreground: var(--primary-foreground);
    --sidebar-primary: var(--secondary);
    --sidebar-primary-foreground: var(--foreground);
    --sidebar-border: var(--border);
    --sidebar-accent: var(--card);
    --sidebar-accent-foreground: var(--foreground);

    /* Accessibility */
    --focus-outline: 3px solid var(--foreground);
    --high-contrast-bg: #fff;
    --high-contrast-fg: #000;
    --link: #8B3A28; /* Deep Rust for links */
    --link-hover: #1A2B3C;
    --disabled: #bdbdbd;
    --disabled-bg: #f0f0f0;

    /* Additional tokens for incremental theming */
    --error-dark: #b32121; /* used for error banners */
    --error-foreground: #ffffff;
    --grid-dot: #888888; /* small radial grid dots */
    --overlay-dark: #23272e; /* used for review lantern */
    --reviewer-bg: #23272e;
    --reviewer-text: #f8f8f2;
    --reviewer-panel: #181a20;
    --reviewer-hover: #44475a;
    --popover-bg: #282a36;
    --popover-border: #44475a;
    --popover-button-bg: #44475a;
    --popover-button-hover: #6272a4;

    /* Explorer Journal */
    --explorer-bg: #1e222a;
    --explorer-text: #f8f8f2;
    --explorer-highlight: #fffa65;
    --explorer-progress-bg: #44475a;
    --explorer-progress-fill: #50fa7b;

    /* Edit Checklist */
    --check-bg: #fffbe6;
    --check-text: #23272e;
    --check-border: #ffe066;
    --check-accent: #d48806;
    --check-highlight: #ffe58f;
    --check-progress-bg: #fff1b8;
    --check-progress-fill: #52c41a;
    --check-muted: #8c8c8c;

    /* Polishing Station */
    --polisher-bg: #23272e;
    --polisher-text: #f8f8f2;
    --polisher-panel: #181a20;
    --polisher-flag-bg: rgba(255, 80, 80, 0.2);
    --polisher-flag-bg-strong: rgba(255, 80, 80, 0.4);
    --polisher-flag-border: #ff5555;
    --polisher-btn: #50fa7b;
    --polisher-btn-text: #282a36;
    --polisher-glow: rgba(80, 250, 123, 0.6);
    --overlay-strong: rgba(0,0,0,0.8);
    /* Modal backdrop token for component-scoped overlays */
    --modal-backdrop: rgba(0,0,0,0.3);

    /* Tutor animation tokens */
    --tutor-anim-shadow: rgba(13, 110, 253, 0.7);
    --tutor-anim-shadow-fade: rgba(13, 110, 253, 0);

    /* Reconnect modal tokens */
    --modal-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    --reconnect-backdrop: rgba(0, 0, 0, 0.4);
    --reconnect-btn: #6b9ed2;
    --reconnect-btn-hover: #3b6ea2;
    --reconnect-btn-border: #0087ff;  

    /* Shadow tokens (use these instead of inline rgba box-shadows) */
    --shadow-soft: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-medium: 0 0 15px rgba(0,0,0,0.2);
    --shadow-strong: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-xl: 0 0 32px rgba(0,0,0,0.5);
    --shadow-top: 0 -1px 2px rgba(0,0,0,0.2);
    --shadow-popover: 0 2px 16px rgba(0,0,0,0.5);

    /* Editor */
    --editor-column-rule: #dddddd; /* Thin rule between columns */
    --editor-scroll-thumb: #ddd; /* Scrollbar thumb for editor scroller */
    --nav-arrow-hover: rgba(0,0,0,0.05); /* hover bg for navigation arrows */

    /* Reader & Menus */
    --menu-bg: var(--card);
    --menu-border: 1px solid rgba(0,0,0,0.12);
    --menu-box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    --reader-shadow: 0 20px 40px rgba(0,0,0,0.4);
    --reader-hover: rgba(255, 242, 0, 0.35);
    --reader-pinned-outline: 2px solid rgba(255, 99, 132, 0.9);

    /* Book shelf and spine tokens */
    --shelf-gradient-start: #6b3e1d;
    --shelf-gradient-end: #502b13;
    --shelf-top-border: rgba(0,0,0,0.12);
    --shelf-inset-shadow: inset 0 4px 0 rgba(255,255,255,0.02);

    --book-blue-start: #2b6fb8;
    --book-blue-end: #184e8a;
    --book-pink-start: #d87aa9;
    --book-pink-end: #b0547f;
    --book-brown-start: #7b4b2e;
    --book-brown-end: #5a371f;
    --book-green-start: #4aa96c;
    --book-green-end: #2c7d4b;
    --book-yellow-start: #f3c85b;
    --book-yellow-end: #e0a72f;

    --book-spine-shadow: 4px 6px 0 rgba(0,0,0,0.15);
    --book-spine-foreground: #FFFFFF; /* Foreground text color used on book spines */
    --book-spine-outline: 3px solid var(--border);

    /* Micro typography tokens */
    --text-10: 10px;
    --text-9: 9px;
    --text-8: 8px;
    --book-focus-outline: 3px dashed rgba(255,255,255,0.6);
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--body-font);
    font-size: var(--font-size);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--primary);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    letter-spacing: 1px;
}

p, li, label, input, textarea, select, button {
    font-family: var(--body-font);
    font-size: var(--font-size);
}

a {
    color: var(--link);
    text-decoration: underline;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: var(--link-hover);
    outline: none;
}

button, .btn {
    font-family: var(--main-font);
    font-size: var(--font-size-lg);
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: var(--radius);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--border);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
button:hover, .btn:hover, button:focus, .btn:focus {
    background: var(--secondary);
    color: var(--secondary-foreground);
    outline: var(--focus-outline);
    box-shadow: 4px 4px 0 var(--border);
}
button:disabled, .btn:disabled {
    background: var(--disabled-bg);
    color: var(--disabled);
    cursor: not-allowed;
    box-shadow: none;
}

input, textarea, select {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size);
    background: var(--card);
    color: var(--foreground);
    transition: border 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
    outline: var(--focus-outline);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

::selection {
    background: var(--accent);
    color: var(--accent-foreground);
}

/* === Typography Utilities === */
.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-ui { font-family: var(--font-ui) !important; }

/* Convenience font utilities for design references */
    /* Font tokens - prefer these variables over literal font-family declarations */
    --press-start-font: 'Press Start 2P', cursive;
    --lexend-font: 'Lexend', sans-serif;
    --patrick-hand-font: 'Patrick Hand', cursive;
    --silkscreen-font: 'Silkscreen', cursive;
    --caveat-font: 'Caveat', cursive;

    .font-press-start-2p { font-family: var(--press-start-font) !important; }
    .font-lexend { font-family: var(--lexend-font) !important; }
    .font-patrick-hand { font-family: var(--patrick-hand-font) !important; }
    .font-silkscreen { font-family: var(--silkscreen-font) !important; }
    .font-caveat { font-family: var(--caveat-font) !important; }
/* Theme helper class: set via --theme-font inline variable to avoid raw font-family attributes */
.theme-font { font-family: var(--theme-font, var(--font-body)) !important; }

.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }

/* Small explicit pixel-based helpers to preserve legacy micro-typography when needed */
.text-10 { font-size: 10px !important; }
.text-9 { font-size: 9px !important; }
.text-8 { font-size: 8px !important; }

.brand-title { font-family: var(--font-heading); font-size: var(--font-size-sm); letter-spacing: 1px; }
.brand-button { font-family: var(--font-ui); }

/* Pixel Grid Background */
.pixel-grid {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 4px, #8b4513 4px, #8b4513 5px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, #8b4513 4px, #8b4513 5px);
}

.pixel-card {
    background: var(--card);
    border: 4px solid var(--border);
    box-shadow: 4px 4px 0px var(--border);
    border-radius: var(--radius);
}

.sidebar-btn {
    border-width: 2px;
    transition: all 0.1s;
    border-radius: var(--radius);
}

.sidebar-btn.active {
    background-color: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    border-color: var(--sidebar-primary);
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.3);
}

.sidebar-btn:not(.active):hover {
    transform: translate(2px, 2px);
}

.pixel-shadow {
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.3);
}

textarea:focus {
    outline: none;
}

input[type="color"] {
    -webkit-appearance: none;
    border: 2px solid var(--border);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius);
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}

input[type="range"] {
    accent-color: var(--primary);
}

select {
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1em;
    border-radius: var(--radius);
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--muted); }
::-webkit-scrollbar-thumb { 
    background: var(--primary); 
    border: 3px solid var(--muted);
    border-radius: var(--radius);
}

.avatar-container {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    background: var(--card); 
    border: 2px solid var(--border);
    border-radius: var(--radius);
}

.system-notebook {
    border-style: double;
    border-width: 6px;
}

/* === Font Theme System (Paired Headings & Body) === */

/* Context menu styles */
#reader-context-menu {
    position: fixed;
    z-index: 20000;
    background: var(--menu-bg);
    border: var(--menu-border);
    box-shadow: var(--menu-box-shadow);
    padding: 8px;
    min-width: 180px;
}
#reader-context-menu .reader-menu-item {
    padding: 6px 8px;
    cursor: pointer;
}
#reader-context-menu .reader-menu-item:hover { background: var(--muted); }

.reader-blazor-context-menu {
    position: fixed;
    z-index: 20000;
    background: var(--menu-bg);
    border: var(--menu-border);
    box-shadow: var(--menu-box-shadow);
    padding: 8px;
    min-width: 180px;
}
.reader-blazor-context-menu .reader-menu-item { padding: 6px 8px; cursor: pointer; }
.reader-blazor-context-menu .reader-menu-item:hover { background: var(--muted); }

#reader-context-menu .reader-menu-list {
    max-height: 200px;
    overflow: auto;
    margin-top: 6px;
}

.ghost-clone {
    box-shadow: var(--reader-shadow);
    border-radius: 6px;
    overflow: hidden;
}

/* 1. Retro Gaming (8-bit) */
.font-pixel { 
    --heading-font: 'Press Start 2P', cursive;
    --body-font: 'VT323', monospace; 
}

/* 2. Storybook (Creative/Cozy) */
.font-hand { 
    --heading-font: 'Luckiest Guy', cursive;
    --body-font: 'Patrick Hand', cursive; 
}

/* 3. Modern School (Clean/Standard) */
.font-rounded { 
    --heading-font: 'Lexend', sans-serif; /* Bold is automatic for Headers */
    --body-font: 'Lexend', sans-serif; 
    --font-size: 17px; /* Bump slightly for legibility */
}

/* 4. Reading Focus (High Legibility) */
.font-inclusive { 
    --heading-font: 'Atkinson Hyperlegible', sans-serif;
    --body-font: 'Atkinson Hyperlegible', sans-serif; 
}

/* 5. Dyslexia Friendly (Specialized) */
.font-dyslexia { 
    --heading-font: 'Comic Neue', cursive;
    --body-font: 'Comic Neue', cursive; 
    letter-spacing: 0.03em; /* Slight increase for readability */
}

/* Legacy Mappings (Redirect to new system if user has old pref) */
.font-minecraft { --heading-font: 'Press Start 2P', cursive; --body-font: 'VT323', monospace; }
.font-retro { --heading-font: 'Press Start 2P', cursive; --body-font: 'VT323', monospace; }
.font-hero { --heading-font: 'Luckiest Guy', cursive; --body-font: 'Patrick Hand', cursive; }

/* Map Room: ensure SVG point scaling is centered and doesn't shift layout */
svg .map-point {
    transform-box: fill-box;
    transform-origin: center;
}

/* Give SVG point transforms a smooth, stable transition (redundant with Tailwind utilities) */
svg .map-point {
    transition: transform 0.18s ease-in-out;
}

/* Ensure labels vertically center against the circle */
svg text[dominant-baseline="middle"] {
    dominant-baseline: middle;
}

/* Ensure the dot scales around its center without shifting sibling text */
svg .map-dot {
    transform-box: fill-box;
    transform-origin: center;
}

/* Ensure pointer events are only handled by the interactive circle, not the whole group */
svg .map-point {
    pointer-events: none;
}

svg .map-point .map-dot {
    pointer-events: auto;
    transition: transform 0.18s ease-in-out;
}