/* ============================================================
   VARIABLES — design tokens & themes
   Source of truth for color, type-family, radius, spacing and
   easing custom properties consumed by every other stylesheet.
   ============================================================ */
:root {
  /* Brand palette (fixed) */
  --gold: #F6BF3B;
  --accent: #FFD76A;
  --success: #00D26A;
  --danger: #FF4D4F;

  /* Dark theme surfaces */
  --bg: #070A10;
  --bg-deep: #03050A;
  --surface: #0D121B;
  --surface-soft: rgba(255, 255, 255, .028);
  --surface-hover: rgba(255, 255, 255, .055);
  --glass: rgba(11, 16, 24, .74);
  --scrim: rgba(3, 5, 10, .94);
  --line: rgba(255, 255, 255, .105);
  --line-strong: rgba(255, 255, 255, .20);
  --text: #FFFFFF;
  --muted: #A4AEC1;
  --grid: rgba(148, 163, 199, .09);
  --shadow-lg: 0 30px 80px -42px rgba(0, 0, 0, .95);
  --shadow-sm: 0 16px 35px -24px rgba(0, 0, 0, .88);
  --glow-gold: 0 0 0 1px rgba(246, 191, 59, .25), 0 18px 48px -24px rgba(246, 191, 59, .34);

  /* Type */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --pad-x: clamp(18px, 4vw, 52px);
  --section-y: clamp(68px, 8vw, 132px);
  --maxw: 1360px;
  --ease: cubic-bezier(.22, .68, 0, 1);
}

/* Arabic swaps the family only — palette and layout are shared */
html[lang="ar"] {
  --font-display: "Cairo", "Inter", system-ui, sans-serif;
  --font-body: "Cairo", "Inter", system-ui, sans-serif;
}

/* Light theme (fully wired, kept restrained) */
[data-theme="light"] {
  --bg: #F6F7FB;
  --bg-deep: #EEF1F7;
  --surface: #FFFFFF;
  --surface-soft: rgba(10, 15, 28, .028);
  --surface-hover: rgba(10, 15, 28, .05);
  --glass: rgba(255, 255, 255, .72);
  --scrim: rgba(246, 247, 251, .92);
  --line: rgba(10, 15, 28, .10);
  --line-strong: rgba(10, 15, 28, .2);
  --text: #0A0F1C;
  --muted: #5C6885;
  --grid: rgba(10, 15, 28, .06);
  --shadow-lg: 0 30px 60px -34px rgba(10, 15, 28, .35);
  --shadow-sm: 0 12px 26px -18px rgba(10, 15, 28, .35);
}

/* ============================================================
   HOMEPAGE PALETTE — "Dark Luxury Trading".
   Scoped to body.home only (src/index.template.html) so the
   auth pages (login/register/otp/…), which link this same file
   directly, keep their current colors untouched.
   ============================================================ */
body.home {
  --gold: #C9A24D;
  --accent: #E5C878;
  --bg: #050505;
  --bg-deep: #030303;
  --surface: #0B0B0B;
  --surface-soft: rgba(255, 255, 255, .028);
  --surface-hover: rgba(255, 255, 255, .055);
  --glass: rgba(11, 11, 11, .74);
  --scrim: rgba(3, 3, 3, .94);
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .20);
  --text: #F5F5F5;
  --muted: #8D8D8D;
  --grid: rgba(141, 141, 141, .08);
  --glow-gold: 0 0 0 1px rgba(201, 162, 77, .28), 0 18px 48px -24px rgba(201, 162, 77, .38);
}
body.home[data-theme="light"] {
  --bg: #F7F5F0;
  --bg-deep: #EFEBE1;
  --surface: #FFFFFF;
  --surface-soft: rgba(10, 10, 10, .028);
  --surface-hover: rgba(10, 10, 10, .05);
  --glass: rgba(255, 255, 255, .74);
  --scrim: rgba(247, 245, 240, .92);
  --line: rgba(10, 10, 10, .10);
  --line-strong: rgba(10, 10, 10, .2);
  --text: #0A0A0A;
  --muted: #6B6558;
  --grid: rgba(10, 10, 10, .06);
  --gold: #A67C2E;
  --accent: #C9A24D;
  --glow-gold: 0 0 0 1px rgba(166, 124, 46, .22), 0 18px 48px -24px rgba(166, 124, 46, .3);
}