/* variables.css - Global design tokens (FIXED & ENHANCED) */
@font-face {
    font-family: 'IRANYekanXVF';
    src: url('/frontend/static/layout/fonts/IRANYekanXVF.woff') format('woff-variations'),
         url('/static/layout/fonts/IRANYekanXVF.woff') format('woff');
    font-weight: 100 1000;
    font-display: fallback;
}
@font-face {
    font-family: 'IRANYekan';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Thin.woff') format('woff'),
         url('/static/layout/fonts/IRANYekanX-Thin.woff') format('woff');
    font-weight: 100;
    font-display: fallback;
}
@font-face {
    font-family: 'IRANYekan';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Thin.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'IRANYekanX';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IRANYekan';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Regular.woff') format('woff'),
         url('/frontend/static/layout/fonts/IRANYekanX-Regular.woff2') format('woff');
    font-weight: 400;
    font-display: fallback;
}
@font-face {
    font-family: 'IRANYekan';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Medium.woff') format('woff'),
         url('/frontend/static/layout/fonts/IRANYekanX-Medium.woff2') format('woff');
    font-weight: 500;
    font-display: fallback;
}
@font-face {
    font-family: 'IRANYekanX';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'IRANYekan';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Bold.woff') format('woff'),
         url('/frontend/static/layout/fonts/IRANYekanX-Bold.woff2') format('woff');
    font-weight: 700;
    font-display: fallback;
}
@font-face {
    font-family: 'IRANYekanX';
    src: url('/frontend/static/layout/fonts/IRANYekanX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {    
    --header-height-desktop: 80px;
    --header-height-tablet: 72px;
    --header-height-mobile: 64px;

    --content-top-gap-desktop: 1.5rem;
    --content-top-gap-tablet: 1.25rem;
    --content-top-gap-mobile: 1rem;

    /* ===== Backgrounds ===== */
    --bg-deep: #080f1c;
    --bg-night: #111115;
    --bg-slate: #0f172a;
    --bg-base: #050508;
    --bg-deep-purple: #1a0b2e;
    --bg-surface: rgba(13, 22, 39, 0.6);
    --bg-features: rgba(13, 22, 39, 0.75);
    --bg-panel: rgba(18, 30, 52, 0.7);
    --bg-panel-dark: rgba(26, 26, 36, 0.6);
    --bg-panel-light: rgba(255, 255, 255, 0.02);
    --bg-footer: rgba(9, 10, 26, 0.6);
    --bg-card: rgba(16, 20, 30, 0.6);
    --bg-modal: rgba(15, 23, 42, 0.85);
    --dark-cover: rgba(0, 0, 0, 0.2);
    --light-cover: rgba(255, 255, 255, 0.2);
    --glass-border-subtle: rgba(0, 229, 255, 0.09);

    /* ===== Accents ===== */
    --accent-cyan: #00e5ff;
    --accent-cyan-glow: rgba(0, 229, 255, 0.4);
    --accent-cyan-pure: #00ffff;
    --accent-blue: #0096c7;
    --accent-blue-dark: #0077b6;
    --accent-purple: #9d4edd;
    --accent-purple-neon: #9d00ff;
    --accent-magenta: #d902ee;
    --accent-gold: #ffd700;
    --accent-amber: #ffaa00;

    /* ===== Status ===== */
    --status-crit: #ff1744;
    --status-warn: #ff9100;
    --status-success: #00e676;
    --status-info: #2e83f2;

    /* ===== Text ===== */
    --text-main: #e2e8f0;
    --text-main-hover: #fff;
    --text-muted: #94a3b8;
    --text-dim: #8b9bb4;
    --text-on-light: #2c3e50;
    --text-on-light-hover: #18242f;

    /* ===== SYNTAX ALIASES ===== */
    --color-cyan: var(--accent-cyan); 
    --text-gold: var(--accent-gold);
    --text-magenta: var(--accent-magenta);
    --accent-crit: var(--status-crit);
    --border-glass: rgba(0, 229, 255, 0.15);
    --glass-border: var(--border-glass);

    /* ===== Borders ===== */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* ===== Layout ===== */
    --font-family: 'IRANYekan', 'IRANYekanXVF', Tahoma, Arial, sans-serif;
    --radius-tiny: 4px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition-smooth: transform 0.25s ease, box-shadow 0.25s ease;

    --icon-size: 2rem;
    --large-icon-size: 3rem;
    --small-icon-size: 1.2rem;
    --tiny-icon-size: 0.9rem;


    /* ===== Components ===== */
    --glow-spread: 20px;
    --ring-size: 220px;
    --ring-thickness: 18px;
    --ring-track: rgba(255, 255, 255, 0.06);
    --chip-done-bg: rgba(0, 230, 118, 0.12);
    --chip-progress-bg: rgba(46, 131, 242, 0.14);
    --chip-todo-bg: rgba(255, 255, 255, 0.05);
    --locked-veil: rgba(5, 5, 8, 0.55);
    --dim-bar-track: rgba(255, 255, 255, 0.06);
    --dim-bar-height: 8px;
    --widget-min-width: 280px;
    --skeleton-shimmer: rgba(255, 255, 255, 0.04);

    /* ===== Desktop Max-Width ===== */
    --site-max-width: 1280px;
    --site-max-width-sidebar: 1100px;
    --game-max-width: 800px;
}