/* ============================================================
   OmniBoard PROJECT — Design Token System
   10 Themes via [data-theme="name"] CSS custom properties
   Default: chrome (also applied to :root)
   ============================================================ */

/* ─── Base Layout Variables ─────────────────────────────────── */
@font-face {
  font-family: "OmniBoard Wafeq";
  src: url("../alfont_com_Wafeq-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OmniBoard Thmanyah";
  src: url("../الخطوط/Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OmniBoard Thmanyah";
  src: url("../الخطوط/Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OmniBoard Thmanyah";
  src: url("../الخطوط/Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OmniBoard Thmanyah";
  src: url("../الخطوط/Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OmniBoard Thmanyah";
  src: url("../الخطوط/Thmanyah-Font-Family/thmanyah typeface/thmanyahsans/woff2/thmanyahsans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: "OmniBoard Thmanyah", "OmniBoard Wafeq", 'Segoe UI', Tahoma, Arial, system-ui, -apple-system, sans-serif;
  --font-ar: "OmniBoard Thmanyah", "OmniBoard Wafeq", 'Segoe UI', Tahoma, Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 9999px;

  --trans-fast:   0.12s ease;
  --trans-base:   0.22s ease;
  --trans-slow:   0.4s ease;
  --trans-spring: 0.35s cubic-bezier(0.34,1.56,0.64,1);

  --z-base:    10;
  --z-panel:   20;
  --z-rail:    30;
  --z-header:  40;
  --z-modal:   50;
  --z-toast:   60;
  --z-tooltip: 70;
}

/* ============================================================
   1. CHROME ULTRA (DEFAULT)
   Silver metallic — blue accent
   ============================================================ */
:root,
[data-theme="chrome"] {
  --bg:              #0e0f10;
  --surface:         #141618;
  --surface2:        #1a1d20;
  --border:          rgba(200,210,220,0.1);
  --accent:          #6ab0ff;
  --accent-muted:    rgba(106,176,255,0.12);
  --accent-glow:     0 0 18px rgba(106,176,255,0.25);
  --ink:             #e8eaec;
  --ink-muted:       rgba(232,234,236,0.45);
  --shadow:          0 24px 70px rgba(0,0,0,0.5);
  --home:            #c0c8d0;
  --away:            #6ab0ff;
  --pitch-bg:        #16301e;
  --pitch-line:      rgba(200,210,220,0.35);
  --btn-primary-bg:  linear-gradient(135deg,#c0c8d0,#a0aab5);
  --btn-primary-ink: #0e0f10;
  --btn-ghost-border:rgba(200,210,220,0.18);
  --btn-ghost-ink:   rgba(232,234,236,0.7);
  --rail-bg:         #0c0d0e;
  --panel-bg:        #0c0d0e;
  --header-bg:       linear-gradient(180deg,#1a1d20,#13151a);
  --header-border:   rgba(200,210,220,0.1);
  /* Scouting chart palette (6 visually distinct, theme-tuned). */
  --chart-1:         #6ab0ff;
  --chart-2:         #ffb86c;
  --chart-3:         #50e3a4;
  --chart-4:         #f06292;
  --chart-5:         #c4a3ff;
  --chart-6:         #ffd166;
}

/* ============================================================
   2. APEX — Electric green neon on black
   ============================================================ */
[data-theme="apex"] {
  --bg:              #020608;
  --surface:         #050c0f;
  --surface2:        #081014;
  --border:          rgba(0,255,100,0.1);
  --accent:          #00ff64;
  --accent-muted:    rgba(0,255,100,0.1);
  --accent-glow:     0 0 20px rgba(0,255,100,0.25);
  --ink:             #e0ffe8;
  --ink-muted:       rgba(224,255,232,0.45);
  --shadow:          0 24px 70px rgba(0,0,0,0.6);
  --home:            #00ff64;
  --away:            #3c82ff;
  --pitch-bg:        #031a0a;
  --pitch-line:      rgba(0,255,100,0.3);
  --btn-primary-bg:  #00ff64;
  --btn-primary-ink: #020608;
  --btn-ghost-border:rgba(0,255,100,0.2);
  --btn-ghost-ink:   rgba(0,255,100,0.7);
  --rail-bg:         #050c0f;
  --panel-bg:        #050c0f;
  --header-bg:       #020608;
  --header-border:   rgba(0,255,100,0.12);
  /* Scouting chart palette — green neon family. */
  --chart-1:         #00ff64;
  --chart-2:         #3c82ff;
  --chart-3:         #ffd166;
  --chart-4:         #ff5e8a;
  --chart-5:         #9affc4;
  --chart-6:         #00d4d4;
}

/* ============================================================
   3. ARCTIC — Clean white/slate Scandinavian
   ============================================================ */
[data-theme="arctic"] {
  --bg:              #f4f5f7;
  --surface:         #ffffff;
  --surface2:        #f0f2f5;
  --border:          rgba(10,12,16,0.1);
  --accent:          #2563eb;
  --accent-muted:    rgba(37,99,235,0.1);
  --accent-glow:     0 0 16px rgba(37,99,235,0.2);
  --ink:             #0a0c10;
  --ink-muted:       rgba(10,12,16,0.45);
  --shadow:          0 20px 60px rgba(0,0,0,0.12);
  --home:            #0a0c10;
  --away:            #2563eb;
  --pitch-bg:        #2e6b3e;
  --pitch-line:      rgba(255,255,255,0.35);
  --btn-primary-bg:  #0a0c10;
  --btn-primary-ink: #ffffff;
  --btn-ghost-border:rgba(10,12,16,0.15);
  --btn-ghost-ink:   rgba(10,12,16,0.7);
  --rail-bg:         #ffffff;
  --panel-bg:        #ffffff;
  --header-bg:       #ffffff;
  --header-border:   rgba(10,12,16,0.08);
  /* Scouting chart palette — arctic blue family. */
  --chart-1:         #2563eb;
  --chart-2:         #f59e0b;
  --chart-3:         #10b981;
  --chart-4:         #ef4444;
  --chart-5:         #8b5cf6;
  --chart-6:         #0ea5e9;
}

/* ============================================================
   4. GOLD — Black with premium gold
   ============================================================ */
[data-theme="gold"] {
  --bg:              #080706;
  --surface:         #0d0b09;
  --surface2:        #111008;
  --border:          rgba(212,175,55,0.15);
  --accent:          #d4af37;
  --accent-muted:    rgba(212,175,55,0.1);
  --accent-glow:     0 0 20px rgba(212,175,55,0.25);
  --ink:             #f5e6b8;
  --ink-muted:       rgba(245,230,184,0.45);
  --shadow:          0 28px 80px rgba(0,0,0,0.65);
  --home:            #d4af37;
  --away:            #c0392b;
  --pitch-bg:        #0d2010;
  --pitch-line:      rgba(212,175,55,0.25);
  --btn-primary-bg:  linear-gradient(135deg,#d4af37,#a8882a);
  --btn-primary-ink: #080706;
  --btn-ghost-border:rgba(212,175,55,0.25);
  --btn-ghost-ink:   rgba(212,175,55,0.7);
  --rail-bg:         #060504;
  --panel-bg:        #060504;
  --header-bg:       linear-gradient(180deg,#111008,#0a0906);
  --header-border:   rgba(212,175,55,0.18);
  /* Scouting chart palette — gold + warm. */
  --chart-1:         #d4af37;
  --chart-2:         #c0392b;
  --chart-3:         #f5e6b8;
  --chart-4:         #8e6d2a;
  --chart-5:         #d4692a;
  --chart-6:         #6b8e4e;
}

/* ============================================================
   5. CYBER — Purple/cyan cyberpunk
   ============================================================ */
[data-theme="cyber"] {
  --bg:              #07020f;
  --surface:         #09030e;
  --surface2:        #0e0518;
  --border:          rgba(180,0,255,0.15);
  --accent:          #b400ff;
  --accent-muted:    rgba(180,0,255,0.12);
  --accent-glow:     0 0 24px rgba(180,0,255,0.3);
  --ink:             #e8d8ff;
  --ink-muted:       rgba(232,216,255,0.45);
  --shadow:          0 28px 80px rgba(0,0,0,0.7);
  --home:            #b400ff;
  --away:            #00eeff;
  --pitch-bg:        #04001a;
  --pitch-line:      rgba(180,0,255,0.35);
  --btn-primary-bg:  rgba(180,0,255,0.8);
  --btn-primary-ink: #fff;
  --btn-ghost-border:rgba(180,0,255,0.25);
  --btn-ghost-ink:   rgba(180,0,255,0.7);
  --rail-bg:         #09030e;
  --panel-bg:        #09030e;
  --header-bg:       rgba(7,2,15,0.98);
  --header-border:   rgba(180,0,255,0.2);
  /* Scouting chart palette — purple/cyan neon. */
  --chart-1:         #b400ff;
  --chart-2:         #00eeff;
  --chart-3:         #ff2eb4;
  --chart-4:         #8aff00;
  --chart-5:         #ffd400;
  --chart-6:         #6a5bff;
}

/* ============================================================
   6. BROADCAST — Dark with broadcast red
   ============================================================ */
[data-theme="broadcast"] {
  --bg:              #111214;
  --surface:         #18191c;
  --surface2:        #1a1c22;
  --border:          rgba(255,255,255,0.06);
  --accent:          #e02020;
  --accent-muted:    rgba(224,32,32,0.12);
  --accent-glow:     0 0 20px rgba(224,32,32,0.3);
  --ink:             #f0f1f3;
  --ink-muted:       rgba(240,241,243,0.45);
  --shadow:          0 24px 60px rgba(0,0,0,0.5);
  --home:            #ffffff;
  --away:            #e02020;
  --pitch-bg:        #1e4a28;
  --pitch-line:      rgba(255,255,255,0.3);
  --btn-primary-bg:  #e02020;
  --btn-primary-ink: #fff;
  --btn-ghost-border:rgba(255,255,255,0.1);
  --btn-ghost-ink:   rgba(255,255,255,0.6);
  --rail-bg:         #0d0e10;
  --panel-bg:        #0d0e10;
  --header-bg:       #e02020;
  --header-border:   transparent;
  /* Scouting chart palette — broadcast reds/whites. */
  --chart-1:         #e02020;
  --chart-2:         #ffffff;
  --chart-3:         #ffd166;
  --chart-4:         #3c82ff;
  --chart-5:         #50e3a4;
  --chart-6:         #c4a3ff;
}

/* ============================================================
   7. SLATE — Military olive/slate
   ============================================================ */
[data-theme="slate"] {
  --bg:              #1a1e18;
  --surface:         #1c2018;
  --surface2:        #21261f;
  --border:          rgba(141,171,122,0.15);
  --accent:          #8dab7a;
  --accent-muted:    rgba(141,171,122,0.1);
  --accent-glow:     0 0 16px rgba(141,171,122,0.2);
  --ink:             #c8d4be;
  --ink-muted:       rgba(200,212,190,0.45);
  --shadow:          0 24px 60px rgba(0,0,0,0.55);
  --home:            #8dab7a;
  --away:            #d4692a;
  --pitch-bg:        #0f1e0a;
  --pitch-line:      rgba(141,171,122,0.3);
  --btn-primary-bg:  #8dab7a;
  --btn-primary-ink: #0f1e0a;
  --btn-ghost-border:rgba(141,171,122,0.2);
  --btn-ghost-ink:   rgba(141,171,122,0.7);
  --rail-bg:         #131610;
  --panel-bg:        #131610;
  --header-bg:       #141710;
  --header-border:   rgba(74,86,64,0.8);
  /* Scouting chart palette — olive/slate field tones. */
  --chart-1:         #8dab7a;
  --chart-2:         #d4692a;
  --chart-3:         #c8d4be;
  --chart-4:         #6b8e4e;
  --chart-5:         #b5985a;
  --chart-6:         #8fa8b8;
}

/* ============================================================
   8. GLASS — Glassmorphism with purple/teal
   ============================================================ */
[data-theme="glass"] {
  --bg:              linear-gradient(135deg,#1a0836,#0e1f4a,#04291e);
  --surface:         rgba(255,255,255,0.07);
  --surface2:        rgba(255,255,255,0.04);
  --border:          rgba(255,255,255,0.12);
  --accent:          #a78bfa;
  --accent-muted:    rgba(167,139,250,0.15);
  --accent-glow:     0 0 24px rgba(167,139,250,0.3);
  --ink:             #f0f2ff;
  --ink-muted:       rgba(240,242,255,0.45);
  --shadow:          0 30px 80px rgba(0,0,0,0.4);
  --home:            #a78bfa;
  --away:            #34d399;
  --pitch-bg:        rgba(0,40,20,0.6);
  --pitch-line:      rgba(167,139,250,0.3);
  --btn-primary-bg:  rgba(167,139,250,0.4);
  --btn-primary-ink: #fff;
  --btn-ghost-border:rgba(255,255,255,0.15);
  --btn-ghost-ink:   rgba(255,255,255,0.6);
  --rail-bg:         rgba(255,255,255,0.05);
  --panel-bg:        rgba(255,255,255,0.06);
  --header-bg:       rgba(255,255,255,0.05);
  --header-border:   rgba(255,255,255,0.1);
  /* Scouting chart palette — glass purple/teal brights. */
  --chart-1:         #a78bfa;
  --chart-2:         #34d399;
  --chart-3:         #fbbf24;
  --chart-4:         #f472b6;
  --chart-5:         #60a5fa;
  --chart-6:         #fb7185;
}

/* ============================================================
   9. NOIR — Black/white with amber
   ============================================================ */
[data-theme="noir"] {
  --bg:              #0a0806;
  --surface:         #0d0b09;
  --surface2:        #111008;
  --border:          rgba(200,146,42,0.15);
  --accent:          #c8922a;
  --accent-muted:    rgba(200,146,42,0.1);
  --accent-glow:     0 0 16px rgba(200,146,42,0.2);
  --ink:             #e8e0d5;
  --ink-muted:       rgba(232,224,213,0.45);
  --shadow:          0 24px 70px rgba(0,0,0,0.7);
  --home:            #e8e0d5;
  --away:            #c8922a;
  --pitch-bg:        #121a10;
  --pitch-line:      rgba(200,146,42,0.25);
  --btn-primary-bg:  #c8922a;
  --btn-primary-ink: #0a0806;
  --btn-ghost-border:rgba(200,146,42,0.2);
  --btn-ghost-ink:   rgba(200,146,42,0.7);
  --rail-bg:         #060504;
  --panel-bg:        #060504;
  --header-bg:       #0a0806;
  --header-border:   rgba(200,146,42,0.25);
  /* Scouting chart palette — noir amber/sepia. */
  --chart-1:         #c8922a;
  --chart-2:         #e8e0d5;
  --chart-3:         #8e6d2a;
  --chart-4:         #b5985a;
  --chart-5:         #6b8e8e;
  --chart-6:         #a87544;
}

/* ============================================================
   10. COSMIC — Deep navy with electric blue
   ============================================================ */
[data-theme="cosmic"] {
  --bg:              #020412;
  --surface:         #030518;
  --surface2:        #060a20;
  --border:          rgba(50,120,255,0.15);
  --accent:          #3278ff;
  --accent-muted:    rgba(50,120,255,0.12);
  --accent-glow:     0 0 24px rgba(50,120,255,0.3);
  --ink:             #ddeeff;
  --ink-muted:       rgba(221,238,255,0.45);
  --shadow:          0 28px 80px rgba(0,0,0,0.6);
  --home:            #3278ff;
  --away:            #ffffff;
  --pitch-bg:        linear-gradient(135deg,#0a1a0e,#081420);
  --pitch-line:      rgba(50,120,255,0.3);
  --btn-primary-bg:  linear-gradient(90deg,#3278ff,#0094e0);
  --btn-primary-ink: #fff;
  --btn-ghost-border:rgba(50,120,255,0.2);
  --btn-ghost-ink:   rgba(50,120,255,0.7);
  --rail-bg:         #030518;
  --panel-bg:        #030518;
  --header-bg:       rgba(2,4,18,0.95);
  --header-border:   rgba(50,120,255,0.2);
  /* Scouting chart palette — cosmic blue brights. */
  --chart-1:         #3278ff;
  --chart-2:         #0094e0;
  --chart-3:         #ffd166;
  --chart-4:         #ff5e8a;
  --chart-5:         #50e3a4;
  --chart-6:         #c4a3ff;
}