/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Nunito:wght@300;400;700&family=Permanent+Marker&display=swap');

/* Utilities */
.font-hand { font-family: 'Caveat', cursive; }
.font-marker { font-family: 'Permanent Marker', cursive; }
.font-sans { font-family: 'Nunito', sans-serif; }

:root {
    --header-height: 0px; 
    
    /* DEFAULT THEME (Mint & Coral) */
    /* These variables will be overwritten by JS if the book has custom settings */
    
    /* Primary (Buttons, Heavy Elements) */
    --color-primary: #0d9488;       /* Teal 600 */
    --color-primary-hover: #0f766e; /* Teal 700 */
    --color-primary-light: #5eead4; /* Teal 300 (Icons, borders) */
    
    /* Background (Page BG, Light Cards) */
    --color-bg: #f0fdfa;            /* Teal 50 */
    --color-bg-card: #ffffff;       /* White */
    
    /* Accent (Stickers, Highlights, Rose parts) */
    --color-accent: #f43f5e;        /* Rose 500 */
    --color-accent-light: #fda4af;  /* Rose 300 */
    
    /* Text */
    --color-text: #334155;          /* Slate 700 */
    --color-text-light: #94a3b8;    /* Slate 400 */
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden; 
    position: fixed; 
}

/* --- BACKGROUNDS & TEXTURES --- */

/* Paper Texture */
.bg-paper-texture {
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Notebook Lines */
.notebook-lines {
    background-image: linear-gradient(transparent 31px, #cbd5e1 31px, transparent 32px);
    background-size: 100% 32px;
    background-color: transparent;
    line-height: 32px;
    padding-top: 2px;
}

/* --- ORGANIC SHAPES --- */
.paper-cut {
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    border: 1px solid rgba(0,0,0,0.06);
}

.paper-cut-rough {
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
    box-shadow: 2px 3px 15px rgba(0,0,0,0.04);
}

/* --- TAPE --- */
.washi-tape {
    position: absolute;
    height: 35px;
    width: 110px;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.65);
    background-image: linear-gradient(
        170deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 0.3) 80%,
        rgba(255, 255, 255, 0.6) 100%
    );
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.25));
    border-left: 1px solid rgba(255,255,255,0.6);
    border-right: 1px solid rgba(255,255,255,0.6);
    clip-path: polygon(
        2% 0%, 98% 2%, 100% 90%, 98% 100%, 95% 96%, 92% 100%, 89% 96%, 86% 100%, 83% 96%, 80% 100%, 
        77% 96%, 74% 100%, 71% 96%, 68% 100%, 65% 96%, 62% 100%, 59% 96%, 56% 100%, 53% 96%, 50% 100%, 
        47% 96%, 44% 100%, 41% 96%, 38% 100%, 35% 96%, 32% 100%, 29% 96%, 26% 100%, 23% 96%, 20% 100%, 
        17% 96%, 14% 100%, 11% 96%, 8% 100%, 5% 96%, 2% 100%, 0% 90%
    );
}

.tape-teal { transform: rotate(-35deg); width: 120px; }
.tape-rose { transform: rotate(25deg); width: 100px; }
.tape-yellow { transform: rotate(-5deg); width: 130px; }
.tape-purple { transform: rotate(15deg); width: 90px; }
.tape-tl { top: -15px; left: -30px; transform: rotate(-45deg); }
.tape-tr { top: -15px; right: -30px; transform: rotate(45deg); }
.tape-bl { bottom: -15px; left: -30px; transform: rotate(45deg); }
.tape-br { bottom: -15px; right: -30px; transform: rotate(-45deg); }
.tape-tc { top: -18px; left: 50%; transform: translateX(-50%) rotate(2deg); }

/* --- POLAROID --- */
.polaroid-card {
    background: var(--color-bg-card);
    padding: 12px;
    box-shadow: 3px 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    transform-origin: center;
    border-radius: 2px; 
}
.polaroid-card:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 50 !important;
    box-shadow: 10px 15px 25px rgba(0,0,0,0.15);
}
.polaroid-image-container {
    background-color: #f5f5f4;
    overflow: hidden;
    filter: sepia(0.05);
}

/* --- ANIMATIONS --- */
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-in { animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.mb-safe { margin-bottom: env(safe-area-inset-bottom, 20px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }
.custom-scrollbar::-webkit-scrollbar { width: 0px; background: transparent; }

/* --- LOADER --- */
#global-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: var(--color-bg); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s ease-in-out;
}
.hidden-loader { transform: translateY(-100%); pointer-events: none; }
.loader-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: dash 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes dash { to { stroke-dashoffset: 0; } }
.loader-fade-in { opacity: 0; animation: fadeIn 1s ease-out 0.8s forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }