/* ══════════════════════════════════════════════════════════════════
   ثبره القابضة — Design tokens
   ⚠️  ملف مولَّد آلياً. لا تحرّره يدوياً.
   المصدر: brand/tokens/tokens.json
   التوليد: node scripts/generate-tokens.mjs
   ══════════════════════════════════════════════════════════════════ */
:root {

  /* ── color ── */
  --c-bg-deep: #05080E;
  --c-bg-base: #080B11;
  --c-panel-1: #0F1622;
  --c-panel-2: #18202E;
  --c-panel-3: #232D3D;
  --c-primary: #3FD8E8;
  --c-primary-soft: #7DE7F2;
  --c-primary-deep: #2FA9BC;
  --c-on-primary: #06121A;
  --c-accent: #6E8BFF;
  --c-accent-soft: #9FB2FF;
  --c-accent-deep: #5571F0;
  --c-on-accent: #070C1A;
  --c-text-strong: #F2F7FC;
  --c-text-body: #C2CEDC;
  --c-text-muted: #8696AB;
  --c-text-faint: #6E7E92;
  --c-border-subtle: rgba(255,255,255,0.07);
  --c-border-default: rgba(255,255,255,0.12);
  --c-border-strong: rgba(255,255,255,0.22);
  --c-glass: rgba(255,255,255,0.045);
  --c-glass-strong: rgba(255,255,255,0.075);
  --c-well: #EAF1F8;
  --c-success: #2ED3A0;
  --c-warning: #E8B14C;
  --c-danger: #FF6B61;

  /* ── font ── */
  --font-sans: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── weight ── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* ── size ── */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h4: 1.375rem;
  --fs-h3: 1.75rem;
  --fs-h2: 2.25rem;
  --fs-h1: 3rem;
  --fs-display: 4rem;

  /* ── leading ── */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* ── space ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ── radius ── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── shadow ── */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 8px 24px rgba(0,0,0,.45);
  --sh-lg: 0 24px 60px rgba(0,0,0,.55);
  --sh-glow: 0 0 40px rgba(63,216,232,.18);
  --sh-glow-accent: 0 0 40px rgba(110,139,255,.18);

  /* ── motion ── */
  --mo-fast: 160ms;
  --mo-base: 280ms;
  --mo-slow: 560ms;
  --mo-ambient: 16s;
  --mo-ease: cubic-bezier(.22,.61,.36,1);
  --mo-spring: cubic-bezier(.34,1.36,.64,1);

  /* ── layout ── */
  --ly-content: 1180px;
  --ly-narrow: 720px;
  --ly-gutter: 1.5rem;
  --ly-header: 72px;
}