/* ═══════════════════════════════════════════════════════════
   MANZIL ADMIN — Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F4F2EE;
  --surface-3: #EBE7E1;

  /* Borders */
  --border: #EBE7E1;
  --border-strong: #DDD7CE;

  /* Text */
  --text: #0F0E0C;
  --text-2: #3A3532;
  --text-3: #6B635B;
  --text-4: #9C948A;
  --text-5: #C4BDB2;

  /* Brand — Teal (Manzil) */
  --teal: #0D9488;
  --teal-hover: #0F766E;
  --teal-soft: #E6F5F3;

  /* Status */
  --green: #16A34A;
  --green-soft: #E8F5EC;
  --amber: #D97706;
  --amber-soft: #FDF3E3;
  --red: #DC2626;
  --red-soft: #FCEAEA;
  --blue: #2563EB;
  --blue-soft: #EAF1FE;
  --purple: #7C3AED;
  --purple-soft: #F0EBFE;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(15, 14, 12, 0.03);
  --shadow-2: 0 2px 8px rgba(15, 14, 12, 0.04);
  --shadow-3: 0 8px 24px rgba(15, 14, 12, 0.06);
  --shadow-4: 0 20px 40px rgba(15, 14, 12, 0.08);
  --shadow-modal: 0 24px 48px rgba(15, 14, 12, 0.16);

  /* Radii */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Layout */
  --sidebar-w: 250px;
  --topbar-h: 60px;

  /* Motion */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  --bg: #0B0B0A;
  --surface: #14130F;
  --surface-2: #1C1A16;
  --surface-3: #262320;

  --border: #262320;
  --border-strong: #35312C;

  --text: #F5F2EC;
  --text-2: #D4CEC4;
  --text-3: #9A9289;
  --text-4: #6B635B;
  --text-5: #46423C;

  --teal: #2DD4BF;
  --teal-hover: #5EEAD4;
  --teal-soft: #0F2D2B;

  --green: #4ADE80;
  --green-soft: #0F2A1B;
  --amber: #FBBF24;
  --amber-soft: #2C2111;
  --red: #F87171;
  --red-soft: #2A1313;
  --blue: #60A5FA;
  --blue-soft: #131F33;
  --purple: #A78BFA;
  --purple-soft: #1E1730;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-4: 0 20px 40px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.7);
}