/* ═══════════════════════════════════════════════════════════════
   KooraLive Admin — Design System
   Dark, professional, RTL-first. Single source of truth.
   ═══════════════════════════════════════════════════════════════

   Replaces variables.css + the ad-hoc palettes that accumulated across
   components.css / pages.css / tables.css / match-details.css.

   Every colour, radius and space below is a token. Components never hardcode
   a hex value — that is what let the old dashboard drift into a cream body
   with a dark sidebar and four clashing pastel stat cards.
*/

:root {
  /* ── Surfaces (dark, layered by elevation) ── */
  --bg-app:      #0e1013;   /* page background, deepest layer */
  --bg-surface:  #16191e;   /* cards, panels */
  --bg-raised:   #1c2027;   /* inputs, nested rows, hover */
  --bg-overlay:  #21262e;   /* dropdowns, modals */
  --bg-sunken:   #0b0d10;   /* code blocks, wells */

  /* ── Borders ── */
  --line:        #252a32;   /* default divider */
  --line-strong: #333a45;   /* emphasis / focus ring base */
  --line-subtle: #1e2228;   /* barely-there separation */

  /* ── Text ── */
  --tx:      #e8eaee;       /* primary */
  --tx-2:    #a3abb8;       /* secondary */
  --tx-3:    #6d757f;       /* muted / meta */
  --tx-on:   #0e1013;       /* on a bright accent fill */

  /* ── Brand accent ── */
  --accent:       #5b8cff;
  --accent-hover: #4a7bf0;
  --accent-soft:  rgba(91, 140, 255, 0.14);
  --accent-line:  rgba(91, 140, 255, 0.35);

  /* ── Semantic (one hue each; soft = tinted background) ── */
  --live:      #ff5c5c;   --live-soft:    rgba(255, 92, 92, 0.13);
  --ok:        #3ecf8e;   --ok-soft:      rgba(62, 207, 142, 0.13);
  --warn:      #f5a524;   --warn-soft:    rgba(245, 165, 36, 0.13);
  --danger:    #f24b4b;   --danger-soft:  rgba(242, 75, 75, 0.13);
  --info:      #4aa8ff;   --info-soft:    rgba(74, 168, 255, 0.13);

  /* ── Typography ── */
  --font: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-num: 'Outfit', 'SF Mono', ui-monospace, monospace;

  --fw-normal: 400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* Type scale — 1.2 ratio, capped so nothing shouts */
  --t-xs:  0.75rem;    /* 12 — meta, codes */
  --t-sm:  0.8125rem;  /* 13 — body small, table cells */
  --t-md:  0.875rem;   /* 14 — default body */
  --t-lg:  1rem;       /* 16 — card titles */
  --t-xl:  1.25rem;    /* 20 — page titles */
  --t-2xl: 1.75rem;    /* 28 — stat numbers */
  --t-3xl: 2.25rem;    /* 36 — scoreboard */

  /* ── Space (4px base) ── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px;  --s-8: 32px;  --s-10: 40px;

  /* ── Radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-full: 999px;

  /* ── Elevation — dark UIs need borders more than shadows ── */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ── Motion ── */
  --fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-w: 248px;
  --header-h:  64px;
}

/* Optional light theme — same tokens, different values, so every component
   follows automatically without a single component-level override. */
[data-theme="light"] {
  --bg-app:     #f6f7f9;
  --bg-surface: #ffffff;
  --bg-raised:  #f1f3f6;
  --bg-overlay: #ffffff;
  --bg-sunken:  #eef0f3;

  --line:        #e3e6ea;
  --line-strong: #cfd4db;
  --line-subtle: #eef0f3;

  --tx:    #16191e;
  --tx-2:  #545c68;
  --tx-3:  #8a929d;
  --tx-on: #ffffff;

  --accent-soft: rgba(91, 140, 255, 0.10);
  --accent-line: rgba(91, 140, 255, 0.30);

  --live-soft:   rgba(255, 92, 92, 0.10);
  --ok-soft:     rgba(62, 207, 142, 0.12);
  --warn-soft:   rgba(245, 165, 36, 0.12);
  --danger-soft: rgba(242, 75, 75, 0.10);
  --info-soft:   rgba(74, 168, 255, 0.10);

  --sh-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sh-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --sh-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.6;
  background: var(--bg-app);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--base), color var(--base);
}

ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }

/* Numeric text is easier to scan monospaced and tabular */
.num, .t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ── Scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--tx-3); background-clip: content-box; }

/* ── Focus: visible for keyboards, invisible for mouse ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-soft); color: var(--tx); }

/* ── Utilities (the few that genuinely reduce markup noise) ── */
.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0 { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}