@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root,
[data-theme="dark"] {
  --bg: #030712;
  --bg-alt: #07111f;
  --surface: rgba(7, 17, 31, 0.92);
  --surface-strong: #0b1728;
  --card: rgba(8, 19, 34, 0.92);
  --card-hover: #10243f;
  --text: #f3f7ff;
  --text-muted: #99abc7;
  --text-soft: #6f86a8;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --blue: #51a7ff;
  --blue-strong: #2667dd;
  --green: #25f0a1;
  --yellow: #f0c63c;
  --danger: #ff6b6b;
  --success: #2ecf7b;
  --shadow-lg: 0 30px 80px rgba(2, 8, 18, 0.45);
  --shadow-md: 0 16px 40px rgba(3, 10, 21, 0.3);
  --shadow-sm: 0 8px 24px rgba(3, 10, 21, 0.18);
  --grad-primary: linear-gradient(135deg, rgba(78, 140, 255, 0.22), rgba(46, 207, 123, 0.08));
  --grad-hero: radial-gradient(circle at top right, rgba(78, 140, 255, 0.24), transparent 35%),
    radial-gradient(circle at bottom left, rgba(240, 198, 60, 0.12), transparent 28%),
    linear-gradient(180deg, #08111d 0%, #07111d 100%);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --container: min(1100px, calc(100% - 1.5rem));
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: clamp(2.4rem, 4.2vw, 3.6rem);
  --section-space: clamp(2.2rem, 4.1vw, 3.6rem);
  --section-tight-space: clamp(1.6rem, 2.8vw, 2.5rem);
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Sora", system-ui, sans-serif;
  --transition: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="light"] {
  --bg: #f4f8fc;
  --bg-alt: #e8eef7;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-strong: #ffffff;
  --card: rgba(255, 255, 255, 0.98);
  --card-hover: #f3f7ff;
  --text: #102034;
  --text-muted: #52657f;
  --text-soft: #7b8ca4;
  --border: rgba(16, 32, 52, 0.1);
  --border-strong: rgba(16, 32, 52, 0.16);
  --blue: #2567dd;
  --blue-strong: #114bb0;
  --green: #1ca963;
  --yellow: #c79514;
  --danger: #d94d4d;
  --success: #1ca963;
  --shadow-lg: 0 30px 80px rgba(15, 33, 53, 0.12);
  --shadow-md: 0 16px 40px rgba(15, 33, 53, 0.1);
  --shadow-sm: 0 8px 24px rgba(15, 33, 53, 0.08);
  --grad-primary: linear-gradient(135deg, rgba(37, 103, 221, 0.12), rgba(28, 169, 99, 0.05));
  --grad-hero: radial-gradient(circle at top right, rgba(37, 103, 221, 0.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(199, 149, 20, 0.08), transparent 24%),
    linear-gradient(180deg, #f4f8fc 0%, #edf3fb 100%);
}