:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ar: "Tajawal", "Inter", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --canvas: #f6f7f9;
  --canvas-raised: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f2f6;
  --surface-3: #e9edf3;
  --text: #10131a;
  --text-strong: #05070b;
  --muted: #596273;
  --subtle: #7c8595;
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.22);
  --shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 12px 36px rgba(15, 23, 42, 0.08);

  --accent: #6d4aff;
  --accent-ink: #6140d9;
  --accent-strong: #5634e8;
  --accent-soft: rgba(109, 74, 255, 0.12);
  --accent-contrast: #ffffff;
  --cyan: #2ba7df;
  --success: #1ba672;
  --danger: #e25555;

  --primary-color: var(--accent);
  --secondary-color: var(--cyan);
  --dark-text: var(--text);
  --light-text: var(--muted);
  --card-bg: var(--surface);
  --dark-bg: var(--canvas);
  --border-color: var(--line);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;
  --space-11: 7.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --container: 80rem;
  --container-copy: 43rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-height: 5rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 1.3vw, 1.2rem);
  --text-xl: clamp(1.25rem, 2vw, 1.55rem);
  --text-2xl: clamp(2rem, 4.6vw, 4.25rem);
  --text-display: clamp(3rem, 7.3vw, 6.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 160ms ease;
  --transition: 280ms var(--ease-out);
  --transition-slow: 520ms var(--ease-out);
}

.dark-mode {
  --canvas: #07090d;
  --canvas-raised: #0a0d13;
  --surface: #0e1219;
  --surface-2: #121822;
  --surface-3: #18202c;
  --text: #e8ecf2;
  --text-strong: #f8fafc;
  --muted: #9aa5b5;
  --subtle: #717d8f;
  --line: rgba(226, 232, 240, 0.11);
  --line-strong: rgba(226, 232, 240, 0.22);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.28);
  --accent-soft: rgba(124, 92, 255, 0.16);
  --accent-ink: #a18fff;
  --dark-bg: var(--canvas);
  --card-bg: var(--surface);
  --dark-text: var(--text);
}

.theme-purple { --accent: #704ce8; --accent-ink: #6140d9; --accent-strong: #6845d8; --accent-soft: rgba(112, 76, 232, 0.14); }
.theme-blue { --accent: #3263d4; --accent-ink: #2858bd; --accent-strong: #2858bd; --accent-soft: rgba(50, 99, 212, 0.14); }
.theme-teal { --accent: #087f75; --accent-ink: #08776d; --accent-strong: #086d65; --accent-soft: rgba(8, 127, 117, 0.14); }
.theme-slate { --accent: #59677d; --accent-ink: #4e5c70; --accent-strong: #4e5c70; --accent-soft: rgba(89, 103, 125, 0.15); }
.theme-royal { --accent: #946819; --accent-ink: #80570d; --accent-strong: #80570d; --accent-soft: rgba(148, 104, 25, 0.14); }
.theme-silver { --accent: #5d7185; --accent-ink: #506478; --accent-strong: #506478; --accent-soft: rgba(93, 113, 133, 0.15); }
.theme-midnight { --accent: #405ec5; --accent-ink: #3752b2; --accent-strong: #3752b2; --accent-soft: rgba(64, 94, 197, 0.14); }

.dark-mode .theme-purple { --accent: #704ce8; --accent-ink: #a18fff; }
.dark-mode .theme-blue { --accent: #3263d4; --accent-ink: #78a1ff; }
.dark-mode .theme-teal { --accent: #087f75; --accent-ink: #43c9bb; }
.dark-mode .theme-slate { --accent: #59677d; --accent-ink: #a3afc0; }
.dark-mode .theme-royal { --accent: #946819; --accent-ink: #e0b65e; }
.dark-mode .theme-silver { --accent: #5d7185; --accent-ink: #b2c0ce; }
.dark-mode .theme-midnight { --accent: #405ec5; --accent-ink: #91a8ff; }

@media (max-width: 760px) {
  :root {
    --header-height: 4.5rem;
    --space-9: 4rem;
    --space-10: 4.5rem;
    --space-11: 5.5rem;
  }
}