/**
 * BaselHub design tokens — مصدر واحد للهوية البصرية.
 *
 * ملاحظة فصل: هذه لوحة ألوان خاصة بـBaselHub (نيلي/سماوي) ومختلفة عن هوية
 * Basel Plus (الأخضر). لا يُشارك أي رمز لوني بين المنتجين.
 */

:root {
  /* Brand */
  --bh-indigo-50: #eef0ff;
  --bh-indigo-100: #dfe2ff;
  --bh-indigo-200: #c3c8ff;
  --bh-indigo-300: #a5a9ff;
  --bh-indigo-400: #4aa3ff;
  --bh-indigo-500: #1479ff;
  --bh-indigo-600: #0762dc;
  --bh-indigo-700: #064db0;
  --bh-indigo-800: #322ba0;
  --bh-indigo-900: #241f75;

  --bh-cyan-300: #7dd3fc;
  --bh-cyan-400: #32e3ff;
  --bh-cyan-500: #00ccea;
  --bh-cyan-600: #009fb8;

  --bh-amber-400: #fbbf24;
  --bh-amber-500: #f59e0b;
  --bh-rose-400: #fb7185;
  --bh-rose-500: #f43f5e;
  --bh-emerald-400: #34d399;
  --bh-emerald-500: #10b981;

  /* Neutrals (dark base) */
  --bh-ink-950: #030814;
  --bh-ink-900: #07101f;
  --bh-ink-850: #0a1425;
  --bh-ink-800: #0d192d;
  --bh-ink-700: #142641;
  --bh-ink-600: #26315c;
  --bh-ink-500: #3a4677;
  --bh-ink-400: #6b7699;
  --bh-ink-300: #9aa3c0;
  --bh-ink-200: #c6cce0;
  --bh-ink-100: #e7eaf5;
  --bh-white: #ffffff;

  /* Semantic — dark theme is the default */
  --bh-bg: var(--bh-ink-950);
  --bh-bg-elevated: var(--bh-ink-900);
  --bh-surface: rgba(10, 20, 37, 0.82);
  --bh-surface-solid: var(--bh-ink-850);
  --bh-surface-hover: rgba(38, 49, 92, 0.55);
  --bh-border: rgba(114, 155, 207, 0.2);
  --bh-border-strong: rgba(90, 178, 255, 0.42);
  --bh-text: #f4f8ff;
  --bh-text-muted: #a8b8ce;
  --bh-text-subtle: #7488a4;
  --bh-accent: var(--bh-indigo-400);
  --bh-accent-strong: var(--bh-indigo-500);
  --bh-accent-contrast: #0b1020;
  --bh-focus: var(--bh-cyan-400);
  --bh-success: var(--bh-emerald-400);
  --bh-warning: var(--bh-amber-400);
  --bh-danger: var(--bh-rose-400);
  --bh-shadow-soft: 0 1px 2px rgba(4, 7, 18, 0.5), 0 12px 32px -18px rgba(4, 7, 18, 0.9);
  --bh-shadow-lift: 0 2px 4px rgba(4, 7, 18, 0.55), 0 26px 60px -28px rgba(9, 14, 34, 0.95);
  --bh-gradient-brand: linear-gradient(135deg, var(--bh-indigo-500) 0%, var(--bh-cyan-500) 100%);
  --bh-gradient-surface: linear-gradient(180deg, rgba(20, 121, 255, 0.14), rgba(0, 204, 234, 0.05) 45%, transparent 100%);

  /* Product-wide semantic aliases. */
  --bg: var(--bh-bg);
  --surface: var(--bh-surface);
  --surface-raised: var(--bh-surface-solid);
  --text: var(--bh-text);
  --text-muted: var(--bh-text-muted);
  --border: var(--bh-border);
  --brand-primary: var(--bh-indigo-500);
  --brand-secondary: var(--bh-cyan-500);
  --success: var(--bh-success);
  --warning: var(--bh-warning);
  --danger: var(--bh-danger);

  /* Typography */
  --bh-font-ar: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", system-ui, -apple-system, "Tahoma", sans-serif;
  --bh-font-en: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bh-font-mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;
  --bh-font: var(--bh-font-ar);

  --bh-text-xs: 0.78rem;
  --bh-text-sm: 0.875rem;
  --bh-text-base: 1rem;
  --bh-text-lg: 1.125rem;
  --bh-text-xl: 1.35rem;
  --bh-text-2xl: 1.7rem;
  --bh-text-3xl: 2.1rem;
  --bh-text-4xl: 2.6rem;
  --bh-text-5xl: 3.4rem;

  --bh-leading-tight: 1.22;
  --bh-leading-snug: 1.4;
  --bh-leading-normal: 1.65;
  --bh-leading-loose: 1.85;

  /* Space */
  --bh-1: 0.25rem;
  --bh-2: 0.5rem;
  --bh-3: 0.75rem;
  --bh-4: 1rem;
  --bh-5: 1.25rem;
  --bh-6: 1.5rem;
  --bh-8: 2rem;
  --bh-10: 2.5rem;
  --bh-12: 3rem;
  --bh-16: 4rem;
  --bh-20: 5rem;
  --bh-24: 6rem;

  /* Radius */
  --bh-radius-xs: 6px;
  --bh-radius-sm: 10px;
  --bh-radius-md: 14px;
  --bh-radius-lg: 20px;
  --bh-radius-xl: 28px;
  --bh-radius-pill: 999px;

  /* Layout */
  --bh-container: 1200px;
  --bh-container-wide: 1360px;
  --bh-header-h: 68px;
  --bh-max-text: 68ch;

  /* Motion */
  --bh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bh-dur-fast: 140ms;
  --bh-dur: 220ms;
  --bh-dur-slow: 420ms;
}

/* English typography uses the Latin stack. */
:root[data-locale="en"] {
  --bh-font: var(--bh-font-en);
}

/* Light theme (explicit) */
:root[data-theme="light"] {
  --bh-bg: #f7f8fc;
  --bh-bg-elevated: #ffffff;
  --bh-surface: rgba(255, 255, 255, 0.86);
  --bh-surface-solid: #ffffff;
  --bh-surface-hover: rgba(84, 73, 224, 0.06);
  --bh-border: rgba(30, 41, 89, 0.12);
  --bh-border-strong: rgba(30, 41, 89, 0.22);
  --bh-text: #131a34;
  --bh-text-muted: #4c5578;
  --bh-text-subtle: #6c7595;
  --bh-accent: var(--bh-indigo-600);
  --bh-accent-strong: var(--bh-indigo-700);
  --bh-accent-contrast: #ffffff;
  --bh-shadow-soft: 0 1px 2px rgba(19, 26, 52, 0.06), 0 12px 30px -20px rgba(19, 26, 52, 0.35);
  --bh-shadow-lift: 0 2px 6px rgba(19, 26, 52, 0.08), 0 28px 60px -30px rgba(19, 26, 52, 0.4);
  --bh-gradient-surface: linear-gradient(180deg, rgba(111, 106, 240, 0.1), rgba(6, 182, 212, 0.04) 45%, transparent 100%);
}

/* Light theme (system preference) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bh-bg: #f7f8fc;
    --bh-bg-elevated: #ffffff;
    --bh-surface: rgba(255, 255, 255, 0.86);
    --bh-surface-solid: #ffffff;
    --bh-surface-hover: rgba(84, 73, 224, 0.06);
    --bh-border: rgba(30, 41, 89, 0.12);
    --bh-border-strong: rgba(30, 41, 89, 0.22);
    --bh-text: #131a34;
    --bh-text-muted: #4c5578;
    --bh-text-subtle: #6c7595;
    --bh-accent: var(--bh-indigo-600);
    --bh-accent-strong: var(--bh-indigo-700);
    --bh-accent-contrast: #ffffff;
    --bh-shadow-soft: 0 1px 2px rgba(19, 26, 52, 0.06), 0 12px 30px -20px rgba(19, 26, 52, 0.35);
    --bh-shadow-lift: 0 2px 6px rgba(19, 26, 52, 0.08), 0 28px 60px -30px rgba(19, 26, 52, 0.4);
    --bh-gradient-surface: linear-gradient(180deg, rgba(111, 106, 240, 0.1), rgba(6, 182, 212, 0.04) 45%, transparent 100%);
  }
}