/**
 * صايع بحر — Pro Glass Design Tokens (sayebahr.com)
 * مصدر واحد — متوافق مع docs/PRO-GLASS-DESIGN.md · play.sayebahr.com
 */
:root {
  /* ── Pro Glass canonical ── */
  --pg-bg-top: #0a2540;
  --pg-bg-mid: #061828;
  --pg-bg-bottom: #020a12;
  --pg-primary: #38bdf8;
  --pg-accent: #fcd34d;
  --pg-text: #e0f2fe;
  --pg-text-heading: #fef3c7;
  --pg-muted: rgba(186, 230, 253, 0.62);
  --pg-border: rgba(56, 189, 248, 0.28);
  --pg-border-glass: rgba(125, 211, 252, 0.28);
  --pg-glass: rgba(6, 24, 40, 0.55);
  --pg-glass-solid: rgba(6, 24, 40, 0.82);
  --pg-glass-blur: blur(18px) saturate(1.35);
  --pg-gradient-hud: linear-gradient(165deg, rgba(14, 116, 196, 0.2), rgba(3, 18, 42, 0.34));
  --pg-gradient-brand: linear-gradient(135deg, #38bdf8 0%, #fcd34d 48%, #7dd3fc 100%);
  --pg-gradient-gold: linear-gradient(135deg, #fef3c7, #fcd34d, #d97706);
  --pg-gradient-primary: linear-gradient(135deg, #0ea5e9, #0284c7);
  --pg-primary-rgb: 56, 189, 248;
  --pg-accent-rgb: 252, 211, 77;
  --pg-bg-rgb: 2, 10, 18;

  /* ── Landing aliases (--hl-*) ── */
  --hl-bg: var(--pg-bg-bottom);
  --hl-bg-top: var(--pg-bg-top);
  --hl-bg-mid: var(--pg-bg-mid);
  --hl-surface: rgba(6, 24, 40, 0.72);
  --hl-surface-solid: rgba(10, 37, 64, 0.92);
  --hl-elevated: rgba(10, 37, 64, 0.88);
  --hl-border: var(--pg-border-glass);
  --hl-border-subtle: rgba(125, 211, 252, 0.14);
  --hl-text: var(--pg-text);
  --hl-text-heading: var(--pg-text-heading);
  --hl-muted: var(--pg-muted);
  --hl-gold: var(--pg-accent);
  --hl-gold-warm: #fbbf24;
  --hl-cyan: var(--pg-primary);
  --hl-sea: #0ea5e9;
  --hl-sea-dark: #0284c7;
  --hl-success: #22c55e;
  --hl-danger: #ef4444;
  --hl-overlay: rgba(var(--pg-bg-rgb), 0.88);
  --hl-overlay-light: rgba(var(--pg-bg-rgb), 0.55);
  --hl-overlay-nav: rgba(var(--pg-bg-rgb), 0.97);
  --hl-primary-a08: rgba(var(--pg-primary-rgb), 0.08);
  --hl-primary-a12: rgba(var(--pg-primary-rgb), 0.12);
  --hl-primary-a15: rgba(var(--pg-primary-rgb), 0.15);
  --hl-primary-a18: rgba(var(--pg-primary-rgb), 0.18);
  --hl-primary-a22: rgba(var(--pg-primary-rgb), 0.22);
  --hl-primary-a28: rgba(var(--pg-primary-rgb), 0.28);
  --hl-primary-a35: rgba(var(--pg-primary-rgb), 0.35);
  --hl-accent-a08: rgba(var(--pg-accent-rgb), 0.08);
  --hl-accent-a12: rgba(var(--pg-accent-rgb), 0.12);
  --hl-accent-a25: rgba(var(--pg-accent-rgb), 0.25);
  --hl-accent-a45: rgba(var(--pg-accent-rgb), 0.45);
  --hl-shadow-primary: 0 4px 20px rgba(var(--pg-primary-rgb), 0.35);
  --hl-shadow-primary-lg: 0 6px 28px rgba(var(--pg-primary-rgb), 0.45);
  --hl-shadow-glass: 0 8px 32px rgba(2, 10, 18, 0.45);
  --hl-header: 56px;
  --hl-header-scrolled: 52px;
  --hl-font: 'Tajawal', system-ui, -apple-system, sans-serif;
  --hl-radius: 14px;
  --hl-radius-sm: 10px;
  --hl-radius-lg: 18px;
  --hl-shadow: 0 4px 16px rgba(2, 10, 18, 0.35);
  --hl-touch: 44px;
  --hl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hl-content-max: min(1080px, 100% - 2rem);
  --hl-pad-x: clamp(1rem, 4vw, 2rem);

  /* pricing / molok aliases */
  --mp-bg-top: var(--hl-bg-top);
  --mp-bg-mid: var(--hl-bg-mid);
  --mp-bg-bot: var(--hl-bg);
  --mp-gold: var(--hl-gold-warm);
  --mp-gold-light: var(--hl-gold);
  --mp-gold-dim: #ca9a2a;
  --mp-border: rgba(var(--pg-accent-rgb), 0.22);
  --mp-border-hover: rgba(var(--pg-accent-rgb), 0.45);
  --mp-card: var(--hl-surface-solid);
  --mp-text: var(--hl-text);
  --mp-muted: var(--hl-muted);
  --mp-footer: var(--hl-bg-mid);
}

/* ── perf-lite: أجهزة ضعيفة ── */
html.perf-lite {
  --hl-shadow: none;
  --hl-shadow-primary: none;
  --hl-shadow-primary-lg: none;
  --hl-shadow-glass: none;
  --hl-radius: 10px;
  --pg-glass-blur: none;
}

html.perf-lite body.home-lite {
  background-image: none !important;
  background-color: var(--hl-bg) !important;
}

html.perf-lite .hl-pro-bg,
html.perf-lite .hl-pro-bg-waves {
  display: none !important;
}

html.perf-lite .hl-header,
html.perf-lite .hl-topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--hl-overlay-nav) !important;
}

html.perf-lite .hl-btn-primary,
html.perf-lite .hl-fab,
html.perf-lite .hl-card,
html.perf-lite .hl-glass,
html.perf-lite .molok-price-row {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-lite .hl-btn-primary,
html.perf-lite .hl-fab {
  box-shadow: none !important;
}

html.perf-lite .gallery-item:hover img,
html.perf-lite .hl-card,
html.perf-lite .molok-price-row,
html.perf-lite .hl-brand {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html.perf-lite .molok-pricing-filter {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-lite .hl-title em,
html.perf-lite .hl-brand {
  -webkit-text-fill-color: var(--hl-gold);
  background: none;
  filter: none;
}

/* focus — accessibility */
:focus-visible {
  outline: 2px solid var(--hl-cyan);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.perf-lite) .hl-brand,
  html:not(.perf-lite) .hl-cta .hl-btn-primary {
    animation: none !important;
  }
}