/* =============================================================
 * tokens.css — Bi Innovate Design System
 * Single source of truth for palette, shape, glass, shadow,
 * motion, and typography tokens.
 *
 * Contract: see specs/002-dark-light-mode/contracts/tokens.css.md
 * Data model: see specs/002-dark-light-mode/data-model.md
 *
 * Scoping rules:
 *   :root                    — dark defaults (theme-invariant tokens too)
 *   :root[data-theme="light"] — palette/glass/shadow overrides ONLY
 *   :root[lang="ar"]          — locale typography overrides ONLY
 *
 * Do NOT place shape, spacing, or motion overrides in
 * theme.light.css. Do NOT place palette overrides in custom.rtl.css.
 * ============================================================= */

:root {
  /* ---------- Palette (dark defaults) ---------- */
  --c-bg: #0a0a12;
  --c-surface: #14141f;
  --c-surface-raised: #1c1c2b;
  --c-border: rgba(255, 255, 255, 0.08);
  --c-text: #ffffff;
  --c-text-muted: rgba(255, 255, 255, 0.7);
  --c-text-subtle: rgba(255, 255, 255, 0.5);
  --c-accent: #ff00d9;
  --c-accent-soft: rgba(255, 0, 217, 0.15);
  --c-accent-contrast: #ffffff;
  --c-danger: #ff4d6d;
  --c-success: #2cd4a0;

  /* ---------- Glass ---------- */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-hover: rgba(255, 255, 255, 0.2);
  --glass-blur: 8px;

  /* ---------- Shape (theme-invariant) ---------- */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-card-lg: 24px;
  --radius-btn: 10px;
  --radius-input: 8px;
  --border-width: 1px;

  /* ---------- Spacing (theme-invariant) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gap-card: 24px;
  --gap-section: 96px;

  /* ---------- Shadow (dark defaults) ---------- */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-accent-glow: 0 0 20px rgba(255, 0, 217, 0.25);
  --shadow-focus-ring: 0 0 0 3px rgba(255, 0, 217, 0.4);

  /* ---------- Motion (theme-invariant) ---------- */
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-theme: 400ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ---------- Typography (EN defaults) ---------- */
  --fw-body: 400;
  --fw-emph: 500;
  --fw-heading: 700;
  --fw-display: 800;
  --lh-body: 1.6;
  --lh-heading: 1.2;
}

/* ===============================================================
 * Light mode — palette / glass / shadow overrides ONLY.
 * NEVER override shape, spacing, motion, or typography here.
 * =============================================================== */
:root[data-theme="light"] {
  /* Palette */
  --c-bg: #ffffff;
  --c-surface: #f7f7fb;
  --c-surface-raised: #ffffff;
  --c-border: rgba(20, 20, 40, 0.1);
  --c-text: #1a1a2e;
  --c-text-muted: rgba(26, 26, 46, 0.7);
  --c-text-subtle: rgba(26, 26, 46, 0.55);
  --c-accent: #d600b8;
  --c-accent-soft: rgba(214, 0, 184, 0.12);
  --c-accent-contrast: #ffffff;
  --c-danger: #d6002a;
  --c-success: #00a37a;

  /* Glass (inverted tints for light backgrounds) */
  --glass-bg: rgba(0, 0, 0, 0.04);
  --glass-bg-strong: rgba(0, 0, 0, 0.06);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-hover: rgba(0, 0, 0, 0.15);

  /* Shadows (softer for light surfaces) */
  --shadow-card: 0 8px 30px rgba(20, 20, 40, 0.08);
  --shadow-card-hover: 0 12px 40px rgba(20, 20, 40, 0.12);
  --shadow-accent-glow: 0 0 20px rgba(214, 0, 184, 0.2);
  --shadow-focus-ring: 0 0 0 3px rgba(214, 0, 184, 0.35);
}

/* ===============================================================
 * Arabic locale — typography weight / line-height bumps ONLY.
 * Cairo / Tajawal render lighter than Latin at the same weight;
 * bump each tier by +100 to preserve optical weight parity.
 * =============================================================== */
:root[lang="ar"] {
  --fw-body: 500;
  --fw-emph: 600;
  --fw-heading: 800;
  --fw-display: 900;
  --lh-body: 1.8;
  --lh-heading: 1.3;
}

/* ===============================================================
 * Theme transition — applied briefly while toggling to smooth
 * the palette crossfade. Scope added by useTheme() composable.
 * =============================================================== */
:root[data-theme-transitioning] *,
:root[data-theme-transitioning] *::before,
:root[data-theme-transitioning] *::after {
  transition:
    background-color var(--duration-theme) var(--ease-out),
    color var(--duration-theme) var(--ease-out),
    border-color var(--duration-theme) var(--ease-out),
    box-shadow var(--duration-theme) var(--ease-out) !important;
}

/* Respect reduced-motion preferences — kill theme-swap transition too. */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme-transitioning] *,
  :root[data-theme-transitioning] *::before,
  :root[data-theme-transitioning] *::after {
    transition: none !important;
  }
}