/* ============================================================
   Design Tokens – CSS Custom Properties
   Dark theme (default) + Light theme override
   Per-focus accent overrides
   ============================================================ */

:root {
  /* Brand */
  --brand-hue: 160;
  --brand: hsl(160, 72%, 40%);
  --brand-dim: hsl(160, 72%, 30%);
  --brand-glow: hsla(160, 72%, 40%, 0.12);
  --brand-shadow: hsla(160, 72%, 40%, 0.25);

  /* Surfaces */
  --bg: #060A10;
  --surface: #0F1520;
  --surface-2: #161E2E;
  --surface-hover: #1C2640;
  --surface-elevated: #1A2438;

  /* Borders & Text */
  --border: #1E293B;
  --text: #F1F5F9;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --text-faint: #475569;

  /* Semantic Colors */
  --expense: #EF4444;
  --expense-glow: rgba(239, 68, 68, 0.1);
  --gold: #F59E0B;
  --gold-glow: rgba(245, 158, 11, 0.1);
  --info: #3B82F6;
  --info-glow: rgba(59, 130, 246, 0.1);
  --transfer: #6366F1;

  /* Layout */
  --sidebar-width: 260px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Typography */
  --font-ar: 'Noto Kufi Arabic', sans-serif;
  --font-en: 'Plus Jakarta Sans', sans-serif;
  --font: var(--font-ar);

  /* Charts */
  --chart-grid: #1E293B;
  --chart-label: #94A3B8;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.35);

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

/* LTR font override */
[dir="ltr"] {
  --font: var(--font-en);
}

/* ============================================================
   Light Theme
   ============================================================ */
[data-theme="light"] {
  --bg: #F1F5F9;
  --surface: #FFF;
  --surface-2: #F8FAFC;
  --surface-hover: #F1F5F9;
  --surface-elevated: #FFF;

  --border: #E2E8F0;
  --text: #0F172A;
  --text-muted: #475569;
  --text-dim: #64748B;
  --text-faint: #94A3B8;

  --brand-glow: hsla(160, 72%, 40%, 0.06);
  --brand-shadow: hsla(160, 72%, 40%, 0.12);
  --expense-glow: rgba(239, 68, 68, 0.06);
  --gold-glow: rgba(245, 158, 11, 0.06);
  --info-glow: rgba(59, 130, 246, 0.06);

  --chart-grid: #E2E8F0;
  --chart-label: #64748B;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);
}

/* ============================================================
   Focus-based Accent Overrides
   ============================================================ */
[data-focus="finance"] {
  --brand-hue: 160;
  --brand: #10B981;
  --brand-dim: hsl(160, 72%, 30%);
  --brand-glow: hsla(160, 72%, 40%, 0.12);
  --brand-shadow: hsla(160, 72%, 40%, 0.25);
}

[data-focus="crm"] {
  --brand-hue: 250;
  --brand: #6366F1;
  --brand-dim: hsl(250, 72%, 30%);
  --brand-glow: hsla(250, 72%, 40%, 0.12);
  --brand-shadow: hsla(250, 72%, 40%, 0.25);
}

[data-focus="meal"] {
  --brand-hue: 25;
  --brand: #F97316;
  --brand-dim: hsl(25, 72%, 30%);
  --brand-glow: hsla(25, 72%, 40%, 0.12);
  --brand-shadow: hsla(25, 72%, 40%, 0.25);
}

[data-focus="inventory"] {
  --brand-hue: 200;
  --brand: #0EA5E9;
  --brand-dim: hsl(200, 72%, 30%);
  --brand-glow: hsla(200, 72%, 40%, 0.12);
  --brand-shadow: hsla(200, 72%, 40%, 0.25);
}

[data-focus="general"] {
  --brand-hue: 220;
  --brand: #475569;
  --brand-dim: hsl(220, 15%, 25%);
  --brand-glow: hsla(220, 15%, 40%, 0.12);
  --brand-shadow: hsla(220, 15%, 40%, 0.25);
}

/* Light theme + focus reduced glows */
[data-theme="light"][data-focus="crm"] {
  --brand-glow: hsla(250, 72%, 40%, 0.06);
  --brand-shadow: hsla(250, 72%, 40%, 0.12);
}

[data-theme="light"][data-focus="meal"] {
  --brand-glow: hsla(25, 72%, 40%, 0.06);
  --brand-shadow: hsla(25, 72%, 40%, 0.12);
}

[data-theme="light"][data-focus="inventory"] {
  --brand-glow: hsla(200, 72%, 40%, 0.06);
  --brand-shadow: hsla(200, 72%, 40%, 0.12);
}

[data-theme="light"][data-focus="finance"] {
  --brand-glow: hsla(160, 72%, 40%, 0.06);
  --brand-shadow: hsla(160, 72%, 40%, 0.12);
}

[data-theme="light"][data-focus="general"] {
  --brand-glow: hsla(220, 15%, 40%, 0.06);
  --brand-shadow: hsla(220, 15%, 40%, 0.12);
}