/* ════════════════════════════════════════════════════════════
   OTTIMA — tokens.css
   متغيرات الألوان والثيم (Design Tokens) + Reset
   جزء من main.css الأصلي، اتقسّم لملفات أصغر للصيانة الأسهل.
   ════════════════════════════════════════════════════════════ */

/* ── BRAND + LIGHT THEME TOKENS ── */
:root {
  --gold:   #C9A84C;
  --gold-l: #E2C97E;
  --gold-d: #A8853A;
  --gold-s: rgba(201,168,76,.12);
  --gold-b: rgba(201,168,76,.28);

  --bg:      #F4F1EA;
  --card:    #FFFFFF;
  --border:  #E5DFD5;
  --hover:   #F0EDE6;
  --input:   #FAFAF8;
  --sidebar: #22201D;
  --sidebar-fg: #EDE8DF;
  --sidebar-muted: rgba(237,232,223,.45);
  --text:    #1C1A17;
  --sub:     #6B6055;
  --muted:   #9E9485;

  --success: #2E7D4F;  --success-bg: rgba(46,125,79,.12);
  --warning: #B45309;  --warning-bg: rgba(180,83,9,.12);
  --danger:  #C0392B;  --danger-bg:  rgba(192,57,43,.12);
  --info:    #1D5F8A;  --info-bg:    rgba(29,95,138,.12);

  --r:  10px;
  --rs: 6px;
  --rl: 16px;
  --sw: 260px;
  --th: 64px;

  --shadow-sm: 0 1px 4px rgba(28,26,23,.08);
  --shadow-md: 0 4px 16px rgba(28,26,23,.10);
  --shadow-lg: 0 8px 32px rgba(28,26,23,.12);
}

[data-theme="dark"] {
  --bg:      #181614;
  --card:    #1E1C18;
  --border:  #2E2B22;
  --hover:   #262320;
  --input:   #141209;
  --sidebar: #111009;
  --sidebar-fg: #EDE8DF;
  --sidebar-muted: rgba(237,232,223,.45);
  --text:    #EDE8DF;
  --sub:     #A89A87;
  --muted:   #6B6055;
  --success: #3EBD72; --success-bg: rgba(62,189,114,.14);
  --warning: #F59E0B; --warning-bg: rgba(245,158,11,.14);
  --danger:  #E05454; --danger-bg:  rgba(224,84,84,.14);
  --info:    #5BAFD6; --info-bg:    rgba(91,175,214,.14);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
/* شبكة أمان: أي أيقونة SVG بره سياق مصنّف (زرار/شريط جانبي/بطاقة...) بتاخد
   مقاس افتراضي معقول بدل ما تُترك لحجمها الطبيعي غير المتوقع في المتصفح.
   القواعد الأكثر تحديدًا فوق (.btn svg، .icon-btn svg، .nav-link .ico...)
   بتفضل هي الأولوية بسبب specificity الأعلى، فمفيش تعارض. */
svg { width: 16px; height: 16px; }
body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--text); direction: rtl;
  min-height: 100vh; min-height: 100dvh; transition: background .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-l); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-d); }

.ltr { direction: ltr; }