/* ============================================================
   SightGaming — variables.css
   تمام متغیرهای رنگ، فونت، فاصله و سایه
   ============================================================ */

/* ── Vazir Font ──────────────────────────────────────────── */
@font-face {
    font-family: 'Vazir';
    src: url('../assets/fonts/Vazir.woff2') format('woff2'),
         url('../assets/fonts/Vazir.woff') format('woff'),
         url('../assets/fonts/Vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Vazir';
    src: url('../assets/fonts/Vazir-Bold.woff2') format('woff2'),
         url('../assets/fonts/Vazir-Bold.woff') format('woff'),
         url('../assets/fonts/Vazir-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ── Dark Mode (Default) ─────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* Brand */
    --accent:          #60d5a3;
    --accent-hover:    #4ec494;
    --accent-dim:      rgba(96, 213, 163, 0.12);
    --accent-dim2:     rgba(96, 213, 163, 0.22);
    --accent-glow:     0 0 24px rgba(96, 213, 163, 0.35);
    --accent-glow-lg:  0 0 48px rgba(96, 213, 163, 0.4);

    /* Backgrounds */
    --bg-base:         #0a0a0a;
    --bg-surface:      #111111;
    --bg-elevated:     #181818;
    --bg-card:         #1c1c1c;
    --bg-card-hover:   #222222;
    --bg-input:        #161616;
    --bg-overlay:      rgba(0,0,0,0.75);

    /* Text */
    --text-primary:    #f0f0f0;
    --text-secondary:  #a0a0a0;
    --text-muted:      #606060;
    --text-inverted:   #0a0a0a;

    /* Borders */
    --border:          rgba(255,255,255,0.07);
    --border-accent:   rgba(96,213,163,0.25);
    --border-strong:   rgba(255,255,255,0.15);

    /* Status */
    --success:         #60d5a3;
    --warning:         #f5c842;
    --danger:          #f55252;
    --info:            #52b4f5;

    /* Misc */
    --radius-sm:       6px;
    --radius:          12px;
    --radius-lg:       18px;
    --radius-xl:       28px;
    --radius-full:     9999px;

    --shadow-sm:       0 2px 8px rgba(0,0,0,0.4);
    --shadow:          0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg:       0 12px 48px rgba(0,0,0,0.6);

    --transition:      all 0.25s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: all 0.45s cubic-bezier(0.4,0,0.2,1);

    /* Header */
    --header-bg:       rgba(10,10,10,0.88);
    --header-border:   rgba(255,255,255,0.06);

    /* Footer */
    --footer-bg:       #080808;
    --footer-border:   rgba(255,255,255,0.06);

    /* Scrollbar */
    --scrollbar-track: #111;
    --scrollbar-thumb: #333;
}

/* ── Light Mode ──────────────────────────────────────────── */
[data-theme="light"] {
    --accent:          #38b886;
    --accent-hover:    #2ea876;
    --accent-dim:      rgba(56,184,134,0.10);
    --accent-dim2:     rgba(56,184,134,0.20);
    --accent-glow:     0 0 24px rgba(56,184,134,0.25);
    --accent-glow-lg:  0 0 48px rgba(56,184,134,0.3);

    --bg-base:         #f5f5f5;
    --bg-surface:      #ffffff;
    --bg-elevated:     #fafafa;
    --bg-card:         #ffffff;
    --bg-card-hover:   #f8f8f8;
    --bg-input:        #f0f0f0;
    --bg-overlay:      rgba(0,0,0,0.5);

    --text-primary:    #111111;
    --text-secondary:  #555555;
    --text-muted:      #999999;
    --text-inverted:   #ffffff;

    --border:          rgba(0,0,0,0.08);
    --border-accent:   rgba(56,184,134,0.3);
    --border-strong:   rgba(0,0,0,0.15);

    --header-bg:       rgba(255,255,255,0.92);
    --header-border:   rgba(0,0,0,0.08);

    --footer-bg:       #111111;
    --footer-border:   rgba(255,255,255,0.08);

    --shadow-sm:       0 2px 8px rgba(0,0,0,0.08);
    --shadow:          0 4px 24px rgba(0,0,0,0.10);
    --shadow-lg:       0 12px 48px rgba(0,0,0,0.14);

    --scrollbar-track: #eee;
    --scrollbar-thumb: #ccc;
}