/* بيت الهجده — مصدر التصميم الواحد (Design Tokens)
   كل صفحة تأخذ الألوان والمسافات والخطوط من هنا. */
:root {
  /* Surfaces */
  --h-bg: #f7f3ea;
  --h-surface: #fffdf8;
  --h-elevated: #ffffff;
  --h-text: #1a1712;
  --h-muted: #5e574c;
  --h-gold: #b39359;
  --h-gold-bright: #8a6f3f;
  --h-line: rgba(26, 23, 18, 0.10);
  --h-gold-line: rgba(179, 147, 89, 0.38);
  --h-nav: rgba(247, 243, 234, 0.86);
  --h-ink: #1a1712;
  --h-mark: #1a1712;

  /* Accents (trading / secondary) */
  --h-teal: #38b8b5;
  --h-danger: #c45c5c;
  --h-success: #3d9b6e;

  /* Typography */
  --h-font: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --h-display: "Noto Naskh Arabic", "Amiri", serif;

  /* Spacing scale (4px base) */
  --h-space-1: 0.25rem;
  --h-space-2: 0.5rem;
  --h-space-3: 0.75rem;
  --h-space-4: 1rem;
  --h-space-5: 1.5rem;
  --h-space-6: 2rem;
  --h-space-7: 3rem;
  --h-space-8: 4.5rem;

  /* Radii */
  --h-radius-sm: 8px;
  --h-radius: 12px;
  --h-radius-lg: 16px;
  --h-radius-xl: 22px;
  --h-radius-pill: 999px;

  /* Elevation */
  --h-shadow-sm: 0 1px 2px rgba(26, 23, 18, 0.04);
  --h-shadow: 0 8px 28px rgba(26, 23, 18, 0.07);
  --h-shadow-lg: 0 18px 48px rgba(26, 23, 18, 0.10);
  --h-glow-gold: 0 0 24px rgba(179, 147, 89, 0.22);

  /* Motion */
  --h-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --h-duration: 0.22s;
  --h-duration-slow: 0.45s;

  /* Focus */
  --h-focus: 2px solid var(--h-gold);
  --h-focus-offset: 3px;

  /* Touch target */
  --h-touch: 44px;

  /* Legacy aliases used across older pages */
  --bg: var(--h-bg);
  --panel: var(--h-surface);
  --elevated: var(--h-elevated);
  --text: var(--h-text);
  --muted: var(--h-muted);
  --gold: var(--h-gold);
  --gold-bright: var(--h-gold-bright);
  --line: var(--h-line);
  --gold-line: var(--h-gold-line);
  --card: var(--h-surface);
  --border: var(--h-line);
  --header-bg: var(--h-nav);

  color-scheme: light;
}

/* ليل حبر — ليس فراغًا أسود ولا طينًا بنيًا */
html[data-theme="dark"] {
  --h-bg: #10141c;
  --h-surface: #181e2a;
  --h-elevated: #202736;
  --h-text: #f3eee4;
  --h-muted: #a3abb8;
  --h-gold: #c4a46a;
  --h-gold-bright: #d8c08a;
  --h-line: rgba(243, 238, 228, 0.10);
  --h-gold-line: rgba(196, 164, 106, 0.28);
  --h-nav: rgba(16, 20, 28, 0.82);
  --h-ink: #f3eee4;
  --h-mark: #181e2a;

  --h-teal: #4ec9c6;
  --h-danger: #e07a7a;
  --h-success: #5cbf8a;

  --h-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --h-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --h-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.45);
  --h-glow-gold: 0 0 28px rgba(196, 164, 106, 0.18);

  color-scheme: dark;
}

/* Selection */
::selection {
  background: rgba(179, 147, 89, 0.28);
  color: var(--h-text);
}
html[data-theme="dark"] ::selection {
  background: rgba(196, 164, 106, 0.32);
}