@font-face {
    font-family: 'Jameel Noori Nastaleeq';
    src: url('../fonts/JameelNooriNastaleeq.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Learn Up Pattern Palette --- */
    --lu-lime: #8CC63F;
    /* Bright Lime */
    --lu-green: #0E4D2B;
    /* Deep Forest Green */
    --lu-sage: #5F9EA0;
    /* Muted Sage */
    --lu-light: #F0F4F2;
    /* Light Minty Grey */

    /* --- Light Mode (Default) --- */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.9);

    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;

    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Brand Colors */
    --accent-primary: var(--lu-green);
    /* Primary Action */
    --accent-hover: #0a3d22;
    --accent-secondary: var(--lu-lime);
    /* Highlights/Accents */

    --accent-info: #3182ce;
    --accent-warning: #dd6b20;
    --accent-success: var(--lu-lime);
    --accent-danger: #e53e3e;

    /* --- Typography --- */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* --- Spacing --- */
    --br-sm: 6px;
    --br-md: 8px;
    --br-lg: 12px;

    /* --- Transitions --- */
    --trans-fast: 0.15s ease;
    --trans-med: 0.3s ease;
}

[data-theme="dark"] {
    /* --- Dark Mode Overrides --- */
    --bg-body: #0f172a;
    /* Slate 900 */
    --bg-card: #1e293b;
    /* Slate 800 */
    --bg-overlay: rgba(30, 41, 59, 0.9);

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;

    --border-color: #334155;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);

    /* Adjust accents for dark mode visibility */
    --accent-primary: #8CC63F;
    /* Use Lime as primary in dark for contrast? Or keep Green? Let's use lighter Green */
    --accent-primary: #4ade80;
    /* A brighter version of green or just use Lime */
    --accent-primary: var(--lu-lime);
    /* Lime pops better on dark */
    --accent-hover: #a3d95d;
    --accent-secondary: var(--lu-sage);
}