/* ============================================================
   GeniusLearn — Global Responsive Typography System
   Fluid type scale using clamp() for all screen sizes.
   Load AFTER template inline <style> blocks and BEFORE mobile.css
   so mobile.css can still override with !important on small screens.
   ============================================================ */

/* ------------------------------------------------------------------
   1. FLUID ROOT FONT SIZE
   Scales smoothly from 14px (320px viewport) to 18px (1280px+).
   All rem values throughout the site become fluid automatically.
   ------------------------------------------------------------------ */
html {
    font-size: clamp(14px, 0.4167vw + 12.6667px, 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ------------------------------------------------------------------
   2. FLUID TYPE SCALE — CSS Custom Properties
   Use these variables for consistent sizing anywhere.
   ------------------------------------------------------------------ */
:root {
    /* Body text scale (scales with root) */
    --text-xs:   0.75rem;   /* ~10.5px → ~13.5px  */
    --text-sm:   0.875rem;  /* ~12px   → ~15.75px */
    --text-base: 1rem;      /* ~14px   → ~18px    */
    --text-lg:   1.125rem;  /* ~15.75px→ ~20px    */
    --text-xl:   1.25rem;   /* ~17.5px → ~22.5px  */

    /* Heading scale (uses clamp for dramatic scaling) */
    --text-2xl: clamp(1.25rem,  1.8vw + 0.5rem,  1.75rem);   /* 20px → 28px  */
    --text-3xl: clamp(1.5rem,   2.8vw + 0.4rem,  2.25rem);   /* 24px → 36px  */
    --text-4xl: clamp(1.75rem,  3.8vw + 0.3rem,  3rem);      /* 28px → 48px  */
    --text-5xl: clamp(2rem,     5vw + 0.2rem,     3.75rem);   /* 32px → 60px  */
    --text-6xl: clamp(2.25rem,  6vw + 0.1rem,     4.5rem);    /* 36px → 72px  */

    /* Line heights */
    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --leading-relaxed:1.7;
}

/* ------------------------------------------------------------------
   3. GLOBAL ELEMENT OVERRIDES
   Overrides hard-coded px/rem sizes from template inline styles.
   Loaded after inline styles, so these win by cascade.
   ------------------------------------------------------------------ */

/* ---- Base body ---- */
body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* ---- Headings (global) ---- */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    word-wrap: break-word;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base); }

/* ---- Paragraphs & lists ---- */
p, li {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* ---- Buttons & inputs ---- */
button, .btn, .btn-primary,
input, textarea, select,
.send-btn, .exit-btn, .option-btn,
.duration-btn, .role-btn,
.auth-submit, .submit-btn,
.pack-action, .buy-credits-btn,
.referral-btn, .account-btn, .logout-btn,
.admin-link-btn, .referral-share-btn {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

/* ---- Labels & small text ---- */
label, .label, .hint, .meta, .badge {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

/* ------------------------------------------------------------------
   4. INDEX.HTML — Hero, Cards, User Bar, Chatbot
   ------------------------------------------------------------------ */
.hero h1 {
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
}
.hero p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}
.hero-badge {
    font-size: var(--text-sm);
}
.hero-cta {
    font-size: var(--text-lg);
}
.hero-trust {
    font-size: var(--text-sm);
}

.step-card h3 {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}
.step-card p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.step-number {
    font-size: var(--text-base);
}
.step-icon {
    font-size: var(--text-2xl);
}

.social-proof .stat .num {
    font-size: var(--text-2xl);
}
.social-proof .stat .lbl {
    font-size: var(--text-xs);
}

.user-bar #userDisplay {
    font-size: var(--text-sm);
}
.user-bar #creditDisplay {
    font-size: var(--text-xs);
}
.pack-badge {
    font-size: var(--text-xs);
}

.create-section h2 {
    font-size: var(--text-2xl);
}
.create-section .cost-hint {
    font-size: var(--text-sm);
}

.topic-card h3,
.topic-card h4 {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}
.topic-card p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.topic-card .icon {
    font-size: var(--text-2xl);
}

.sim-title {
    font-size: var(--text-base);
}
.sim-meta {
    font-size: var(--text-xs);
}
.sim-badge {
    font-size: var(--text-xs);
}
.score-text {
    font-size: var(--text-xs);
}

.referral-modal-title {
    font-size: var(--text-2xl);
}
.referral-modal-subtitle {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.referral-stat .number {
    font-size: var(--text-2xl);
}
.referral-stat .label {
    font-size: var(--text-xs);
}
.referral-share-btn {
    font-size: var(--text-xs);
}

.onboarding-modal-title {
    font-size: var(--text-2xl);
}
.onboarding-modal-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.chatbot-message {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.chatbot-button span {
    font-size: var(--text-xl);
}

.tutorial-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.tutorial-emoji {
    font-size: var(--text-4xl);
}

.quiz-promo-section h2 {
    font-size: var(--text-xl);
}
.quiz-promo-section p {
    font-size: var(--text-sm);
}

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

/* ------------------------------------------------------------------
   5. SIMULATION.HTML — Dialogue, Options, Characters
   ------------------------------------------------------------------ */
.dialogue-text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.dialogue-speaker {
    font-size: var(--text-xs);
}
.options-header {
    font-size: var(--text-xs);
}
.option-btn {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.option-letter {
    font-size: var(--text-xs);
}

.character-label .name {
    font-size: var(--text-xs);
}
.character-label .role {
    font-size: var(--text-xs);
}

.role-title {
    font-size: var(--text-2xl);
}
.role-subtitle {
    font-size: var(--text-sm);
}
.role-desc {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.role-context-label {
    font-size: var(--text-xs);
}
.role-context-text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.top-bar #simTitle {
    font-size: var(--text-xs);
}

.loading-content h2 {
    font-size: var(--text-2xl);
}

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

/* ------------------------------------------------------------------
   6. ASSESSMENT.HTML — Scores, Categories, Feedback, Certificate
   ------------------------------------------------------------------ */
.assessment .header h1 {
    font-size: var(--text-3xl);
}
.assessment .header p {
    font-size: var(--text-base);
}

.score-value {
    font-size: var(--text-5xl);
}
.score-label {
    font-size: var(--text-xs);
}
.score-badge {
    font-size: var(--text-xs);
}

.cat-name {
    font-size: var(--text-sm);
}
.cat-score {
    font-size: var(--text-base);
}
.cat-explanation {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.cat-indicator {
    font-size: var(--text-xs);
}

.section h2 {
    font-size: var(--text-xl);
}
.strength-item,
.improve-item {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.feedback-title {
    font-size: var(--text-xs);
}
.feedback-block-label {
    font-size: var(--text-xs);
}
.feedback-user,
.feedback-model,
.feedback-why,
.feedback-real {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.model-scene {
    font-size: var(--text-xs);
}
.model-situation,
.model-ideal {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.cert-title {
    font-size: var(--text-3xl);
}
.cert-title-sub {
    font-size: var(--text-xs);
}
.cert-name {
    font-size: var(--text-3xl);
}
.cert-description {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.cert-topic-highlight {
    font-size: var(--text-base);
}
.cert-meta-value {
    font-size: var(--text-sm);
}
.cert-skills-title {
    font-size: var(--text-xs);
}
.cert-skill-name {
    font-size: var(--text-xs);
}

/* ------------------------------------------------------------------
   7. QUIZ.HTML — Questions, Options, Results
   ------------------------------------------------------------------ */
.quiz-title {
    font-size: var(--text-lg);
}
.quiz-counter {
    font-size: var(--text-sm);
}
.quiz-question {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}
.quiz-option-label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.quiz-nav .btn {
    font-size: var(--text-base);
}

.results-header h1 {
    font-size: var(--text-3xl);
}
.results-header p {
    font-size: var(--text-base);
}
.score-display {
    font-size: var(--text-5xl);
}
.score-display-label {
    font-size: var(--text-2xl);
}
.results-summary {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}
.tag-item {
    font-size: var(--text-sm);
}

/* ------------------------------------------------------------------
   8. LOGIN / REGISTER / AUTH PAGES
   ------------------------------------------------------------------ */
.auth-card h1 {
    font-size: var(--text-3xl);
}
.auth-card p {
    font-size: var(--text-sm);
}
.form-group label {
    font-size: var(--text-sm);
}
.form-group input {
    font-size: var(--text-base);
}
.auth-submit,
.submit-btn {
    font-size: var(--text-base);
}
.auth-footer {
    font-size: var(--text-sm);
}
.social-login-btn {
    font-size: var(--text-base);
}
.consent-section label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------------
   9. PAYMENT / PRICING
   ------------------------------------------------------------------ */
.payment .header h1 {
    font-size: var(--text-3xl);
}
.pack-card h3 {
    font-size: var(--text-xl);
}
.pack-price {
    font-size: var(--text-4xl);
}
.pack-card p,
.pack-card li {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.pack-action {
    font-size: var(--text-base);
}

/* ------------------------------------------------------------------
   10. FEEDBACK / ABOUT / PRIVACY / TERMS / CONTENT PAGES
   ------------------------------------------------------------------ */
.page-card h1 {
    font-size: var(--text-3xl);
}
.page-card h2 {
    font-size: var(--text-xl);
}
.page-card p,
.page-card li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}
.back-link {
    font-size: var(--text-sm);
}

/* ------------------------------------------------------------------
   11. ADMIN / DASHBOARD
   ------------------------------------------------------------------ */
.admin .header h1 {
    font-size: var(--text-2xl);
}
.admin-tab {
    font-size: var(--text-xs);
}
.admin-table {
    font-size: var(--text-xs);
}
.stat-card .number {
    font-size: var(--text-2xl);
}
.stat-card .label {
    font-size: var(--text-xs);
}

/* ------------------------------------------------------------------
   12. SANDBOX DASHBOARD
   ------------------------------------------------------------------ */
.sandbox-dashboard h1 {
    font-size: var(--text-3xl);
}
.sandbox-dashboard h2 {
    font-size: var(--text-xl);
}
.sandbox-dashboard p,
.sandbox-dashboard li {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------------
   13. TASK PAGE
   ------------------------------------------------------------------ */
.task-page h1 {
    font-size: var(--text-3xl);
}
.task-page h2 {
    font-size: var(--text-xl);
}
.task-page p,
.task-page li {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------------
   14. AR / VIDEO SIMULATION
   ------------------------------------------------------------------ */
.ar-page h1,
.video-page h1 {
    font-size: var(--text-3xl);
}
.ar-page p,
.video-page p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------------
   15. UTILITIES — toast, footer, modal buttons
   ------------------------------------------------------------------ */
.toast {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.footer {
    font-size: var(--text-xs);
}
.modal-buttons button {
    font-size: var(--text-sm);
}
.progress-card h3 {
    font-size: var(--text-xl);
}

/* ------------------------------------------------------------------
   16. VIDEO MODE TOGGLE
   ------------------------------------------------------------------ */
#videoModeToggle label {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------------
   17. FINANCIAL STATEMENT
   ------------------------------------------------------------------ */
.financial-page h1 {
    font-size: var(--text-3xl);
}
.financial-page h2 {
    font-size: var(--text-xl);
}
.financial-page p,
.financial-page td,
.financial-page th {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ------------------------------------------------------------------
   18. LARGE DESKTOP ENHANCEMENTS (1440px+)
   Slightly more relaxed line-height for big screens.
   ------------------------------------------------------------------ */
@media (min-width: 1440px) {
    body {
        line-height: 1.65;
    }
    p, li {
        line-height: 1.7;
    }
    .hero p,
    .page-card p,
    .page-card li,
    .tutorial-text,
    .dialogue-text,
    .cat-explanation,
    .role-desc,
    .feedback-user,
    .feedback-model,
    .feedback-why,
    .feedback-real,
    .model-situation,
    .model-ideal,
    .cert-description {
        line-height: 1.75;
    }
}

/* ------------------------------------------------------------------
   19. REDUCED MOTION / ACCESSIBILITY
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        font-size: 16px;
    }
}