/* ═══════════════════════════════════════════════════════════════
   LEARNINGLAND — Design System Tokens v4 · "Amber Solace"
   Palette: Warm orange/amber · Soft cream surfaces · Deep brown text
   Style: Modern Minimalism with Tactile Edge · No gradients
   Font:  Plus Jakarta Sans (Headlines) + Nunito Sans (Body)
   ═══════════════════════════════════════════════════════════════ */

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

:root {
    /* ── Page & Surface ── */
    --bg: #fff8f3;
    --surface: #ffffff;
    --surface-dim: #ebd7bb;
    --surface-bright: #fff8f3;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #fff2e1;
    --surface-container: #ffebcf;
    --surface-container-high: #f9e5c9;
    --surface-container-highest: #f3e0c3;
    --surface-alt: #fff2e1;

    /* ── Primary / Accent — warm amber ── */
    --primary: #8f4e00;
    --primary-dark: #693700;
    --primary-light: #ffebcf;
    --primary-container: #fd9937;
    --inverse-primary: #ffb77b;

    /* ── Deep tones for text ── */
    --deep-amber: #AE5600;
    --burnt-sienna: #893A00;

    /* ── Legacy aliases (teal → amber) ── */
    --teal: #8f4e00;
    --teal-dark: #693700;
    --teal-light: #ffebcf;
    --yellow: #fd9937;
    --yellow-dark: #AE5600;
    --yellow-light: #fff2e1;

    /* ── Module pastels — amber family ── */
    --lavender: #f3e0c3;
    --lavender-dark: #AE5600;
    --sky: #f9e5c9;
    --sky-dark: #8f4e00;
    --rose: #fff2e1;
    --rose-dark: #893A00;
    --mint: #ffebcf;
    --mint-dark: #AE5600;
    --amber: #fff8f3;
    --amber-dark: #8f4e00;
    --peach: #ebd7bb;
    --peach-dark: #AE5600;

    /* ── Legacy aliases kept for activity screens ── */
    --cobalt: #8f4e00;
    --cobalt-light: #ffebcf;
    --cobalt-dark: #693700;
    --mint-light: #ffebcf;
    --coral: #ba1a1a;
    --coral-light: #ffdad6;
    --violet: #AE5600;
    --violet-light: #f3e0c3;
    --sky-light: #f9e5c9;
    --rose-light: #fff2e1;
    --teal-light2: #ffebcf;
    --orange: #fd9937;
    --orange-light: #fff2e1;
    --cream: #fff8f3;
    --paper: #ffffff;
    --periwinkle: #ffebcf;
    --periwinkle-dark: #AE5600;
    --periwinkle-light: #f3e0c3;
    --cream-dark: #ebd7bb;
    --sky-dark2: #8f4e00;
    --ink-light: #544336;

    /* ── Text — deep brown tones ── */
    --ink: #241a08;
    --ink-secondary: #544336;
    --ink-muted: #887364;

    /* ── Sidebar ── */
    --sidebar-bg: #ffffff;
    --sidebar-width: 240px;

    /* ── Semantic aliases ── */
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-nav-bg: var(--sidebar-bg);
    --color-nav-text: var(--ink-secondary);
    --color-text: var(--ink);
    --color-text-muted: var(--ink-muted);
    --color-accent: var(--primary);
    --color-accent-dark: var(--primary-dark);
    --color-highlight: var(--primary-light);
    --color-success: #47b8a1;
    --color-error: var(--coral);

    /* ── Typography ── */
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Nunito Sans', sans-serif;

    /* ── Radius — friendly rounded ── */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;

    /* ── Shadows — warm amber-tinted, ambient ── */
    --shadow-sm: 0 2px 10px rgba(143, 78, 0, .06);
    --shadow-md: 0 6px 24px rgba(143, 78, 0, .10);
    --shadow-lg: 0 14px 48px rgba(143, 78, 0, .14);

    /* ── Transitions ── */
    --transition: all .22s cubic-bezier(.4, 0, .2, 1);
}