/* Almgwar Pay — Design Tokens (V35)
   Single source of truth. Primary = V32 green. */

:root,
html[data-bs-theme="light"],
html[data-ap-theme="light"] {
  /* Semantic surfaces */
  --ap-bg: #f0f4f2;
  --ap-surface: #ffffff;
  --ap-surface-2: #f7faf8;
  --ap-surface-hover: #eef5f1;

  /* Text */
  --ap-text: #0f1a14;
  --ap-text-muted: #4a5c54;
  --ap-muted: var(--ap-text-muted);

  /* Borders & elevation */
  --ap-border: rgba(15, 40, 30, 0.12);
  --ap-shadow: 0 10px 28px rgba(15, 40, 30, 0.07);

  /* Brand / status */
  --ap-primary: #0f9f66;
  --ap-primary-hover: #0d8756;
  --ap-success: #0f9f66;
  --ap-warning: #c47d0e;
  --ap-danger: #c62828;
  --ap-info: #0d7ea0;

  /* Legacy aliases (keep existing markup working) */
  --ap-accent: var(--ap-primary);
  --ap-accent-2: var(--ap-info);
  --ap-card: var(--ap-surface);

  /* Inputs */
  --ap-input-bg: #ffffff;
  --ap-input-border: rgba(15, 40, 30, 0.16);
  --ap-focus-ring: rgba(15, 159, 102, 0.28);

  /* Sidebar */
  --ap-sidebar: #ffffff;
  --ap-sidebar-2: #f7faf8;
  --ap-sidebar-text: #334155;
  --ap-sidebar-muted: #64748b;
  --ap-sidebar-hover: rgba(15, 23, 42, 0.05);

  /* Radius */
  --ap-radius-sm: 0.55rem;
  --ap-radius-md: 0.85rem;
  --ap-radius-lg: 1.15rem;
  --ap-radius: var(--ap-radius-md);

  /* Spacing scale */
  --ap-space-1: 0.25rem;
  --ap-space-2: 0.5rem;
  --ap-space-3: 0.75rem;
  --ap-space-4: 1rem;
  --ap-space-5: 1.5rem;
  --ap-space-6: 2rem;

  /* Typography */
  --ap-font: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --ap-font-ar: "Noto Sans Arabic", "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --ap-fs-page-title: 1.2rem;
  --ap-fs-section: 1.05rem;
  --ap-fs-card-title: 0.95rem;
  --ap-fs-body: 0.95rem;
  --ap-fs-label: 0.82rem;
  --ap-fs-small: 0.78rem;
  --ap-fs-btn: 0.9rem;
  --ap-fs-badge: 0.72rem;

  /* Content widths */
  --ap-content-narrow: 520px;
  --ap-content-medium: 720px;
  --ap-content-wide: 960px;

  /* Bootstrap bridges */
  --bs-primary: var(--ap-primary);
  --bs-success: var(--ap-success);
  --bs-warning: var(--ap-warning);
  --bs-danger: var(--ap-danger);
  --bs-info: var(--ap-info);

  /* Compat aliases used by older CSS */
  --bg: var(--ap-bg);
  --surface: var(--ap-surface);
  --surface-2: var(--ap-surface-2);
  --surface-hover: var(--ap-surface-hover);
  --text: var(--ap-text);
  --text-muted: var(--ap-text-muted);
  --border: var(--ap-border);
  --primary: var(--ap-primary);
  --primary-hover: var(--ap-primary-hover);
  --success: var(--ap-success);
  --warning: var(--ap-warning);
  --danger: var(--ap-danger);
  --info: var(--ap-info);
  --shadow: var(--ap-shadow);
  --input-bg: var(--ap-input-bg);
  --input-border: var(--ap-input-border);
  --focus-ring: var(--ap-focus-ring);

  --ds-bg: var(--ap-bg);
  --ds-surface: var(--ap-surface);
  --ds-surface-2: var(--ap-surface-2);
  --ds-text: var(--ap-text);
  --ds-muted: var(--ap-text-muted);
  --ds-border: var(--ap-border);
  --ds-accent: var(--ap-primary);
  --ds-accent-2: var(--ap-info);
  --ds-accent-soft: color-mix(in srgb, var(--ap-primary) 12%, transparent);
  --ds-danger: var(--ap-danger);
  --ds-warning: var(--ap-warning);
  --ds-success: var(--ap-success);
  --ds-shadow: var(--ap-shadow);
  --ds-space-1: var(--ap-space-1);
  --ds-space-2: var(--ap-space-2);
  --ds-space-3: var(--ap-space-3);
  --ds-space-4: var(--ap-space-4);
  --ds-space-5: var(--ap-space-5);
  --ds-space-6: var(--ap-space-6);
  --ds-radius-sm: var(--ap-radius-sm);
  --ds-radius: var(--ap-radius-md);
  --ds-radius-lg: var(--ap-radius-lg);
  --ds-transition: 180ms ease;
  --ds-transition-slow: 240ms ease;

  /* Homepage / auth bridges */
  --hp-bg: var(--ap-bg);
  --hp-surface: var(--ap-surface);
  --hp-text: var(--ap-text);
  --hp-muted: var(--ap-text-muted);
  --hp-border: var(--ap-border);
  --hp-accent: var(--ap-primary);

  --lv-accent: var(--ap-primary);
}

html[data-bs-theme="dark"],
html[data-ap-theme="dark"] {
  --ap-bg: #070b14;
  --ap-surface: #0f1724;
  --ap-surface-2: #141e2e;
  --ap-surface-hover: #1a2638;
  --ap-text: #e8eef8;
  --ap-text-muted: #9aa8bf;
  --ap-muted: var(--ap-text-muted);
  --ap-border: rgba(148, 163, 184, 0.18);
  --ap-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  --ap-primary: #1fbf7a;
  --ap-primary-hover: #19a86a;
  --ap-success: #1fbf7a;
  --ap-warning: #e6a23c;
  --ap-danger: #e85a6b;
  --ap-info: #22d3ee;
  --ap-accent: var(--ap-primary);
  --ap-accent-2: var(--ap-info);
  --ap-card: var(--ap-surface);
  --ap-input-bg: #121a28;
  --ap-input-border: rgba(148, 163, 184, 0.22);
  --ap-focus-ring: rgba(31, 191, 122, 0.35);
  --ap-sidebar: #020617;
  --ap-sidebar-2: #000814;
  --ap-sidebar-text: #cbd5e1;
  --ap-sidebar-muted: #64748b;
  --ap-sidebar-hover: rgba(255, 255, 255, 0.06);

  --hp-bg: var(--ap-bg);
  --hp-surface: color-mix(in srgb, var(--ap-surface) 92%, transparent);
  --hp-text: var(--ap-text);
  --hp-muted: var(--ap-text-muted);
  --hp-border: var(--ap-border);
  --hp-accent: var(--ap-primary);
  --lv-accent: var(--ap-primary);
}

html[dir="rtl"] body,
html[dir="rtl"] .ap-body {
  font-family: var(--ap-font-ar);
}