:root {
  --s3-bg: #0b0d0f;
  --s3-bg-2: #121518;
  --s3-surface: #181c1f;
  --s3-surface-2: #202529;
  --s3-paper: #f3f5f5;
  --s3-paper-2: #e8ecec;
  --s3-ink: #f7fafb;
  --s3-ink-dark: #101315;
  --s3-muted: #9ca7aa;
  --s3-muted-dark: #667176;
  --s3-line: rgba(255,255,255,.09);
  --s3-line-dark: rgba(7,16,13,.12);
  --s3-accent: #12d9e8;
  --s3-accent-hover: #58ebf5;
  --s3-accent-deep: #08aeb9;
  --s3-accent-soft: rgba(18,217,232,.12);
  --s3-success: #2ed497;
  --s3-danger: #ff6b6b;
  --s3-shadow: 0 24px 80px rgba(0,0,0,.30);
  --s3-shadow-soft: 0 18px 60px rgba(0,0,0,.12);
  --s3-radius-sm: 16px;
  --s3-radius: 24px;
  --s3-radius-lg: 36px;
  --s3-max: 1280px;
  --s3-font-ar: "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --s3-font-lat: "Inter", system-ui, sans-serif;
  --s3-ease: cubic-bezier(.22,.61,.36,1);
  --s3-fast: 220ms;
  --s3-med: 650ms;
  --s3-slow: 900ms;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
}