/*
 * Mathfacto — theme tokens.
 * From Mathfacto/docs/brand.md (AppColors in lib/theme.dart): Outfit everywhere,
 * teal #009688 core with dark-teal #00635A headings, plus the wizard accents
 * Arcane Violet #6C4AB6 and Spell Gold #F5C542 — used lightly.
 * White text on #009688 is only ~3.7:1, so buttons use the brand's dark teal;
 * the brighter teals and gold stay decorative. Violet (~6.4:1 on white) is safe
 * for small text. Never use violet or gold to mean right or wrong.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #F8FCFC;
    --surface: #FFFFFF;
    --surface-sunk: #E8F5F3;
    --border: #D9DEE5;
    --ink: #2D333B;
    --ink-2: #4A5568;          /* slate */
    --ink-3: #5B6676;
    --heading: #00635A;        /* Dark Teal */

    --primary: #00635A;
    --primary-pressed: #004D46;
    --primary-tint: #D6F4EF;
    --on-primary: #FFFFFF;
    --accent: #6C4AB6;         /* Arcane Violet — step numerals fade teal → violet */
    --link: #00635A;
    --eyebrow: #6C4AB6;
    --grad-from: #00635A;      /* final call-to-action: teal → violet */
    --grad-to: #6C4AB6;
    --glow: rgba(108, 74, 182, 0.22);

    --gold: #F5C542;           /* Spell Gold — stars, decoration only */

    --font-display: Outfit, system-ui, sans-serif;
    --font-body: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --display-weight: 700;
    --display-tracking: -0.02em;
}

/* Wordmark in the app header (the brand's own lockup) */
.app-brand .mf-wordmark { height: 40px; width: auto; }
.app-footer .app-brand .mf-wordmark { height: 32px; }