/**
 * Iwelabibook Typography System
 * Designed for Children's Reading Platform
 * 
 * Research-based typography following best practices from:
 * - "Designing Digital Products for Kids" by Rubens Cantuni
 * - UX of EdTech guidelines
 * 
 * KEY PRINCIPLES:
 * 1. Sans-serif fonts for screen readability
 * 2. Round counters and friendly shapes
 * 3. Taller x-height for early readers
 * 4. Single-story 'a' and 'g' characters (infant characters)
 * 5. Generous line-height (1.5-1.6x)
 * 6. Larger font sizes for young readers
 * 7. Avoid decorative/cursive fonts
 * 8. Sentence case (avoid ALL CAPS)
 */

/* ============================================
   FONT IMPORTS
   ============================================ */

/* Primary Font: Nunito - Rounded, friendly, excellent x-height */
/* Perfect for body text and UI elements */

/* Display Font: Bubblegum Sans - Fun, whimsical for headings */
/* Great for titles and attention-grabbing elements */

/* Accent Font: Fredoka - Bold, playful for large headings */
/* Ideal for hero sections and call-to-actions */

/* UI Font: Quicksand - Clean, rounded for navigation */
/* Good for buttons, menus, and labels */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Bubblegum+Sans&family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================ */

:root {
    /* Font Families */
    --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Bubblegum Sans', cursive;
    --font-heading: 'Fredoka', sans-serif;
    --font-ui: 'Quicksand', sans-serif;
    
    /* Font Sizes - Based on x-height recommendations for children */
    /* Ages 5-7: Larger sizes | Ages 8-11: Medium | Ages 12+: Standard */
    
    /* Display sizes (for hero sections, page titles) */
    --text-display-xl: clamp(2.5rem, 5vw, 4rem);     /* 40-64px */
    --text-display-lg: clamp(2rem, 4vw, 3rem);       /* 32-48px */
    --text-display-md: clamp(1.75rem, 3vw, 2.5rem); /* 28-40px */
    
    /* Heading sizes */
    --text-h1: clamp(1.75rem, 3vw, 2.25rem);  /* 28-36px */
    --text-h2: clamp(1.5rem, 2.5vw, 1.875rem); /* 24-30px */
    --text-h3: clamp(1.25rem, 2vw, 1.5rem);    /* 20-24px */
    --text-h4: clamp(1.125rem, 1.5vw, 1.25rem); /* 18-20px */
    --text-h5: clamp(1rem, 1.25vw, 1.125rem);   /* 16-18px */
    --text-h6: clamp(0.875rem, 1vw, 1rem);      /* 14-16px */
    
    /* Body text sizes */
    --text-body-lg: 1.25rem;   /* 20px - For young readers (Ages 5-7) */
    --text-body: 1.125rem;      /* 18px - Standard child-friendly */
    --text-body-sm: 1rem;       /* 16px - For older children */
    --text-body-xs: 0.875rem;   /* 14px - Captions, labels */
    
    /* Line Heights - Generous for better readability */
    --leading-tight: 1.3;
    --leading-normal: 1.6;      /* Golden ratio based */
    --leading-relaxed: 1.75;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    
    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    
    /* Colors - High contrast for readability */
    --text-primary: #2D3748;      /* Dark gray - main text */
    --text-secondary: #4A5568;    /* Medium gray - secondary */
    --text-muted: #718096;        /* Light gray - hints, captions */
    --text-accent: #7C3AED;       /* Purple - links, highlights */
    --text-success: #10B981;      /* Green - success messages */
    --text-warning: #F59E0B;      /* Orange - warnings */
    --text-danger: #EF4444;       /* Red - errors */
    --text-white: #FFFFFF;
    --text-light: #F7FAFC;
}

/* ============================================
   BASE TYPOGRAPHY STYLES
   ============================================ */

html {
    font-size: 16px; /* Base for rem calculations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    letter-spacing: var(--tracking-normal);
}

/* ============================================
   HEADINGS
   ============================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: 0.5em;
}

h1, .h1 {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

h2, .h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
}

h3, .h3 {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
}

h4, .h4 {
    font-size: var(--text-h4);
    font-weight: var(--weight-medium);
}

h5, .h5 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
}

h6, .h6 {
    font-size: var(--text-h6);
    font-weight: var(--weight-medium);
}

/* ============================================
   DISPLAY HEADINGS (For Hero Sections)
   ============================================ */

.display-xl {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    font-weight: var(--weight-normal);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
}

.display-lg {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-normal);
    line-height: 1.2;
}

.display-md {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    font-weight: var(--weight-normal);
    line-height: 1.25;
}

/* ============================================
   BODY TEXT
   ============================================ */

p {
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    margin-bottom: 1em;
}

.lead {
    font-size: var(--text-body-lg);
    line-height: var(--leading-relaxed);
    font-weight: var(--weight-medium);
}

.text-lg {
    font-size: var(--text-body-lg);
}

.text-base {
    font-size: var(--text-body);
}

.text-sm {
    font-size: var(--text-body-sm);
}

.text-xs {
    font-size: var(--text-body-xs);
}

/* ============================================
   SPECIAL TEXT STYLES
   ============================================ */

/* Fun/Playful style for children's content */
.text-fun {
    font-family: var(--font-display);
}

/* UI elements style */
.text-ui {
    font-family: var(--font-ui);
    font-weight: var(--weight-medium);
}

/* Caption style */
.caption {
    font-size: var(--text-body-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

/* Overline style (small label above headings) */
.overline {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-accent);
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: var(--text-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #6D28D9;
    text-decoration: underline;
}

/* ============================================
   LISTS
   ============================================ */

ul, ol {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    margin-bottom: 1em;
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.5em;
}

/* ============================================
   BUTTONS & UI ELEMENTS
   ============================================ */

.btn, 
button,
.main-btn,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-body-sm) !important;
    letter-spacing: var(--tracking-wide);
}

/* ============================================
   NAVIGATION
   ============================================ */

.topbar nav,
.nav-list,
.res-menu {
    font-family: var(--font-ui);
    font-weight: var(--weight-medium);
}

.nav-list > li > a {
    font-family: var(--font-ui) !important;
    font-size: var(--text-body-sm) !important;
    font-weight: var(--weight-semibold) !important;
}

/* ============================================
   SECTION HEADINGS (Pitnik Template Override)
   ============================================ */

.sec-heading h2 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-bold) !important;
}

.sec-heading span {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-medium) !important;
}

/* ============================================
   HERO/BANNER TEXT
   ============================================ */

.text-caro-meta h1,
.text-caro-meta h1 a {
    font-family: var(--font-display) !important;
    font-size: var(--text-display-lg) !important;
    line-height: 1.2 !important;
}

.text-caro-meta span {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-medium) !important;
}

.text-caro-meta p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-body) !important;
    line-height: var(--leading-normal) !important;
}

/* ============================================
   WELCOME SECTION
   ============================================ */

.welcome-area h2 {
    font-family: var(--font-heading) !important;
    font-size: var(--text-h1) !important;
    font-weight: var(--weight-bold) !important;
}

.welcome-area p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-body) !important;
}

/* ============================================
   BOOK CARDS & GAME BOXES
   ============================================ */

.game-box h5,
.game-box h5 a {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-semibold) !important;
}

.game-box p {
    font-family: var(--font-primary) !important;
}

.portfolio-box h4,
.portfolio-box h4 a {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-semibold) !important;
}

/* ============================================
   SERVICE/FEATURE BOXES
   ============================================ */

.serv-box h4 {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-semibold) !important;
}

.serv-box p {
    font-family: var(--font-primary) !important;
    font-size: var(--text-body-sm) !important;
}

/* ============================================
   PRICING BOXES
   ============================================ */

.price-box h2 {
    font-family: var(--font-heading) !important;
}

.price-box h1 {
    font-family: var(--font-display) !important;
}

.price-features li {
    font-family: var(--font-primary) !important;
}

/* ============================================
   STATS/COUNTERS
   ============================================ */

.funfact .count,
.counter {
    font-family: var(--font-display) !important;
}

.counter-meta h2 {
    font-family: var(--font-heading) !important;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    font-family: var(--font-primary);
}

footer .nav-links a {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-medium) !important;
}

/* ============================================
   FILTER TABS (Book Library)
   ============================================ */

.option-set li a {
    font-family: var(--font-ui) !important;
    font-weight: var(--weight-semibold) !important;
    font-size: var(--text-body-sm) !important;
}

/* ============================================
   FORMS
   ============================================ */

input,
textarea,
select {
    font-family: var(--font-primary);
    font-size: var(--text-body-sm);
}

label {
    font-family: var(--font-ui);
    font-weight: var(--weight-medium);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Font families */
.font-primary { font-family: var(--font-primary) !important; }
.font-display { font-family: var(--font-display) !important; }
.font-heading { font-family: var(--font-heading) !important; }
.font-ui { font-family: var(--font-ui) !important; }

/* Font weights */
.font-light { font-weight: var(--weight-light) !important; }
.font-normal { font-weight: var(--weight-normal) !important; }
.font-medium { font-weight: var(--weight-medium) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-bold { font-weight: var(--weight-bold) !important; }
.font-extrabold { font-weight: var(--weight-extrabold) !important; }

/* Text colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--text-accent) !important; }
.text-success { color: var(--text-success) !important; }
.text-warning { color: var(--text-warning) !important; }
.text-danger { color: var(--text-danger) !important; }
.text-white { color: var(--text-white) !important; }

/* Line heights */
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
.leading-loose { line-height: var(--leading-loose) !important; }

/* Letter spacing */
.tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.tracking-normal { letter-spacing: var(--tracking-normal) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide) !important; }
.tracking-wider { letter-spacing: var(--tracking-wider) !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Text transform - Note: Avoid uppercase for children */
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Tablet */
@media (max-width: 991px) {
    :root {
        --text-body: 1rem;
        --text-body-lg: 1.125rem;
    }
    
    .text-caro-meta h1 {
        font-size: var(--text-h1) !important;
    }
}

/* Mobile */
@media (max-width: 576px) {
    :root {
        --text-body: 1rem;
        --text-body-lg: 1.125rem;
        --text-body-sm: 0.9375rem;
    }
    
    h1, .h1 {
        font-size: 1.75rem;
    }
    
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    h3, .h3 {
        font-size: 1.25rem;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #F7FAFC;
        --text-secondary: #E2E8F0;
        --text-muted: #A0AEC0;
    }
}

/* Manual dark mode class */
.dark-mode {
    --text-primary: #F7FAFC;
    --text-secondary: #E2E8F0;
    --text-muted: #A0AEC0;
}