/*
 * Shared type scale for every game.
 *
 * Research baseline for children roughly 7–11 years old:
 *   - 14pt (~18px) is the minimum size for comfortable reading
 *     (TIDRC framework, CBC Kids/Deque); reading passages are often
 *     set at 18pt (~24px) or larger.
 *   - Platform guidance is 11pt/44pt (Apple) and 12sp/48dp (Android)
 *     as absolute floors, but games for children should sit above them.
 *
 * Therefore: nothing a child must read goes below 14px. Questions and
 * answer options are 18–24px, and everything is in rem so browser text
 * zoom still works. Sizes use clamp() so one token covers phone,
 * tablet and desktop without extra media queries.
 */

:root {
    /* Two-tier fonts: Fredoka gives headings/actions their playful voice;
       Quicksand carries every piece of reading text. */
    --font-display: 'Fredoka', 'Quicksand', cursive, sans-serif;
    --font-body: 'Quicksand', sans-serif;

    /* 14px — smallest size allowed for a caption, badge or meta label. */
    --text-meta: 0.875rem;
    /* 16px — supporting copy, hints and secondary buttons. */
    --text-small: 1rem;
    /* 17–18px — normal body copy. */
    --text-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    /* 18–20px — answer options and primary buttons. */
    --text-option: clamp(1.125rem, 1.03rem + 0.4vw, 1.25rem);
    /* 20–24px — question and step text. */
    --text-question: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    /* 28–40px — screen titles. */
    --text-title: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
    /* 32–48px — hero titles only. */
    --text-hero: clamp(2rem, 1.5rem + 2.2vw, 3rem);

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-reading: 1.55;

    /* Touch targets: 44px is the platform minimum, 48px the child-friendly one. */
    --tap-min: 2.75rem;
    --tap-comfortable: 3rem;
}

.type-hero {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
}

.type-title {
    font-family: var(--font-display);
    font-size: var(--text-title);
    line-height: var(--leading-tight);
}

.type-question {
    font-size: var(--text-question);
    line-height: var(--leading-snug);
}

.type-option {
    font-size: var(--text-option);
    line-height: var(--leading-snug);
}

.type-body {
    font-size: var(--text-body);
    line-height: var(--leading-reading);
}

.type-small {
    font-size: var(--text-small);
    line-height: var(--leading-reading);
}

.type-meta {
    font-size: var(--text-meta);
    line-height: 1.3;
}