/* ============================================================
   CRE Panel — Design Tokens
   Generated with ui-design-system methodology
   Brand: #0ea5e9 · Style: modern · Dark theme · 8pt grid · 1.25 type scale
   ============================================================ */
:root{
  /* ---- primary scale (sky) ---- */
  --primary-50:#f0f9ff;  --primary-100:#e0f2fe; --primary-200:#bae6fd; --primary-300:#7dd3fc;
  --primary-400:#38bdf8; --primary-500:#0ea5e9; --primary-600:#0284c7; --primary-700:#0369a1;
  --primary-800:#075985; --primary-900:#0c4a6e; --primary:#38bdf8; --primary-strong:#0ea5e9;

  /* ---- secondary (complementary, hue+180 → indigo/violet accent) ---- */
  --secondary-400:#818cf8; --secondary-500:#6366f1; --secondary-600:#4f46e5; --secondary:#818cf8;

  /* ---- semantic ---- */
  --success:#10b981; --success-l:#34d399; --success-d:#059669;
  --warning:#f59e0b; --warning-l:#fbbf24; --warning-d:#d97706;
  --error:#ef4444;   --error-l:#f87171;   --error-d:#dc2626;
  --info:#3b82f6;    --info-l:#60a5fa;    --info-d:#2563eb;

  /* ---- dark surfaces (neutral, softened for comfort) ---- */
  --bg:#0d1526; --bg-2:#131f36; --surface:#18253f; --surface-2:#1e2e4c; --elevated:#22324f;
  --surface-hover:#213152;
  --border:#2c3d61; --border-2:#3a4d75; --divider:#243352;
  --line:#233150;

  /* ---- text (higher contrast for readability) ---- */
  --text:#eef3fb; --text-muted:#adbcd9; --text-dim:#7688a8;

  /* ---- gradients ---- */
  --grad-primary:linear-gradient(135deg,#0ea5e9,#6366f1);
  --grad-primary-h:linear-gradient(90deg,#38bdf8,#818cf8);
  --grad-hero:radial-gradient(1200px 400px at 85% -10%,rgba(14,165,233,.18),transparent 60%),radial-gradient(900px 350px at 10% 0%,rgba(99,102,241,.14),transparent 55%);

  /* ---- typography ---- */
  --font-sans:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,-apple-system,sans-serif;
  --font-mono:'Fira Code','Consolas',ui-monospace,monospace;
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:20px; --fs-xl:25px; --fs-2xl:31px; --fs-3xl:39px; --fs-4xl:49px;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --lh-tight:1.25; --lh-snug:1.375; --lh-normal:1.55; --lh-relaxed:1.65;

  /* ---- spacing (8pt grid) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ---- radius (modern) ---- */
  --r-sm:6px; --r:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-full:9999px;

  /* ---- shadows ---- */
  --sh-sm:0 1px 2px 0 rgba(0,0,0,.35);
  --sh:0 2px 6px -1px rgba(0,0,0,.45),0 1px 3px 0 rgba(0,0,0,.35);
  --sh-md:0 8px 20px -6px rgba(0,0,0,.5);
  --sh-lg:0 18px 40px -12px rgba(0,0,0,.6);
  --sh-glow:0 0 0 1px rgba(56,189,248,.18),0 10px 34px -10px rgba(14,165,233,.4);

  /* ---- motion ---- */
  --dur-fast:150ms; --dur:250ms; --dur-slow:350ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- z-index ---- */
  --z-sticky:1020; --z-overlay:1030; --z-modal:1040; --z-tooltip:1060;
}

/* motion keyframes */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes popIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}