/* PROPHONE — generated from tokens.json */
:root, [data-theme="dark"] {
  --brand-cyan: #00a0e0;
  --brand-blend: #7365ad;
  --brand-purple: #8753a2;
  --brand-ink: #040707;
  --paper: #ffffff;
  --surface-000: #06080d;
  --surface-100: #0c0f17;
  --surface-200: #151926;
  --surface-300: #1f2435;
  --line: #252a3b;
  --line-strong: #6b7390;
  --text: #f1f3f9;
  --text-muted: #a3aac0;
  --text-on-brand: #ffffff;
  --accent: #00a0e0;
  --accent-hover: #33b8ef;
  --on-accent: #040707;
  --accent-text: #3fc0f5;
  --purple-text: #bf93dc;
  --focus: #3fc0f5;
  --success: #3ed68c;
  --success-soft: #0e2a1d;
  --warning: #f7b23b;
  --warning-soft: #2e2210;
  --danger: #ff7a7a;
  --danger-soft: #331417;
  --shadow-card: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 0 1px rgba(0,160,224,0.35), 0 12px 40px rgba(135,83,162,0.30);
  color-scheme: dark;
}
[data-theme="light"] {
  --brand-cyan: #00a0e0;
  --brand-blend: #7365ad;
  --brand-purple: #8753a2;
  --brand-ink: #040707;
  --paper: #ffffff;
  --surface-000: #f4f5f9;
  --surface-100: #ffffff;
  --surface-200: #eceef4;
  --surface-300: #dfe2eb;
  --line: #d6d9e3;
  --line-strong: #7d8499;
  --text: #0a0c12;
  --text-muted: #525a70;
  --text-on-brand: #ffffff;
  --accent: #0074ad;
  --accent-hover: #005f8f;
  --on-accent: #ffffff;
  --accent-text: #006a9e;
  --purple-text: #763f93;
  --focus: #0074ad;
  --success: #11713f;
  --success-soft: #e2f4e9;
  --warning: #8a5100;
  --warning-soft: #fbf0dc;
  --danger: #c0262d;
  --danger-soft: #fbe4e5;
  --shadow-card: 0 1px 2px rgba(10,12,18,0.06), 0 8px 24px rgba(10,12,18,0.08);
  --shadow-glow: 0 0 0 1px rgba(0,116,173,0.30), 0 12px 32px rgba(135,83,162,0.18);
  color-scheme: light;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --gradient-brand: linear-gradient(90deg, #00a0e0 0%, #7365ad 50%, #8753a2 100%);
  --slant: -10deg;
  --font-display: Poppins, "Helvetica Neue", Arial, sans-serif;
  --font-sans: Poppins, "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "DIN Next Arabic", "Noto Kufi Arabic", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 72px; font-weight: 800; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.015em; }
.display-light { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 200; letter-spacing: -0.01em; }
.price { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.01em; }
.heading-1 { font-family: var(--font-display); font-size: 36px; line-height: 44px; font-weight: 700; }
.heading-2 { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; }
.heading-3 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
.body-l { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.spec { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.arabic-heading { font-family: var(--font-arabic); font-size: 30px; line-height: 44px; font-weight: 500; }
.arabic-body { font-family: var(--font-arabic); font-size: 16px; line-height: 28px; font-weight: 400; }