@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

:root {
  color-scheme: light;

  --cs-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-font-family-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  --cs-deep-navy: #002A4E;
  --cs-navy-mid: #004B7A;
  --cs-cyan: #00AEEF;
  --cs-cyan-bright: #00C7FF;
  --cs-metallic-1: #C0C0C0;
  --cs-metallic-2: #E5E4E2;

  --cs-brand-primary: var(--cs-deep-navy);
  --cs-brand-accent: var(--cs-cyan);
  --cs-action-primary: var(--cs-cyan-bright);
  --cs-action-soft: #F3F7FA;
  --cs-hero-accent: #c9dff0;
  --cs-hero-accent-strong: #e5f1fa;
  --cs-success: #2E6FA3;
  --cs-warning: #FFD45B;

  --cs-bg: #F5F7FA;
  --cs-surface: rgba(255, 255, 255, 0.92);
  --cs-surface-strong: #ffffff;
  --cs-surface-muted: #EEF2F6;
  --cs-text: #0B2540;
  --cs-text-muted: #52687B;
  --cs-text-soft: #6E8192;
  --cs-border: rgba(16, 38, 61, 0.12);
  --cs-border-strong: rgba(16, 38, 61, 0.2);
  --cs-shadow-soft: 0 18px 40px rgba(8, 28, 49, 0.08);
  --cs-shadow-card: 0 24px 56px rgba(8, 28, 49, 0.14);

  --cs-gradient-page: radial-gradient(circle at 12% 16%, rgba(0, 142, 198, 0.09), transparent 30%), radial-gradient(circle at 85% 8%, rgba(0, 74, 122, 0.05), transparent 26%), linear-gradient(180deg, #F7FAFD 0%, #F1F5F9 52%, #F5F7FA 100%);
  --cs-gradient-page-alt: radial-gradient(circle at 78% 18%, rgba(0, 120, 180, 0.08), transparent 28%), radial-gradient(circle at 18% 78%, rgba(0, 59, 99, 0.05), transparent 30%), linear-gradient(180deg, #F8FBFD 0%, #F2F6FA 54%, #F6F8FB 100%);
  --cs-gradient-page-soft: radial-gradient(circle at 50% 0%, rgba(0, 101, 154, 0.06), transparent 32%), radial-gradient(circle at 12% 88%, rgba(0, 74, 122, 0.04), transparent 26%), linear-gradient(180deg, #F9FBFD 0%, #F3F7FA 58%, #F7F9FB 100%);
  --cs-gradient-hero: radial-gradient(700px 460px at 6% 18%, rgba(0, 142, 198, 0.10), transparent 26%), radial-gradient(480px 320px at 80% 70%, rgba(0, 92, 140, 0.10), transparent 28%), radial-gradient(420px 300px at 42% 52%, rgba(0, 42, 78, 0.24), transparent 32%), radial-gradient(240px 180px at 60% 30%, rgba(0, 120, 180, 0.05), transparent 36%), linear-gradient(135deg, #012845 0%, #003b63 52%, #005a86 100%);
  --cs-gradient-cta: linear-gradient(180deg, var(--cs-cyan-bright) 0%, var(--cs-cyan) 100%);

  --cs-space-1: 0.25rem;
  --cs-space-2: 0.5rem;
  --cs-space-3: 0.875rem;
  --cs-space-4: 1.25rem;
  --cs-space-5: 2rem;
  --cs-space-6: 3.5rem;
  --cs-space-7: 5rem;

  --cs-container-max: 87.5rem;
  --cs-container-gutter: clamp(1rem, 4vw, 3rem);
  --cs-container-width: min(calc(100% - (2 * var(--cs-container-gutter))), var(--cs-container-max));
  --cs-container-radius: 1.5rem;
  --cs-radius-card: 1.25rem;
  --cs-radius-pill: 999px;
}

body[data-cs-theme="dark"] {
  color-scheme: dark;

  --cs-brand-primary: #8fd4ff;
  --cs-brand-accent: #61c8ff;
  --cs-action-primary: #9fe1ff;

  --cs-bg: #08111D;
  --cs-surface: rgba(10, 22, 37, 0.86);
  --cs-surface-strong: #0D1B2D;
  --cs-surface-muted: #132338;
  --cs-text: #edf4ff;
  --cs-text-muted: #b3c4da;
  --cs-text-soft: #8ea3be;
  --cs-border: rgba(174, 204, 239, 0.14);
  --cs-border-strong: rgba(174, 204, 239, 0.24);
  --cs-shadow-soft: 0 22px 54px rgba(0, 0, 0, 0.32);
  --cs-shadow-card: 0 28px 64px rgba(0, 0, 0, 0.42);
  --cs-gradient-page: radial-gradient(circle at top left, rgba(0, 174, 239, 0.11), transparent 24%), radial-gradient(circle at 84% 10%, rgba(0, 74, 122, 0.04), transparent 22%), linear-gradient(180deg, #08111D 0%, #091625 52%, #0D1723 100%);
  --cs-gradient-page-alt: radial-gradient(circle at 82% 18%, rgba(0, 120, 180, 0.1), transparent 24%), radial-gradient(circle at 16% 84%, rgba(0, 59, 99, 0.09), transparent 28%), linear-gradient(180deg, #08121E 0%, #0A1726 52%, #0E1A28 100%);
  --cs-gradient-page-soft: radial-gradient(circle at 52% 2%, rgba(0, 101, 154, 0.08), transparent 30%), radial-gradient(circle at 10% 88%, rgba(0, 74, 122, 0.07), transparent 24%), linear-gradient(180deg, #08131F 0%, #0A1828 56%, #0F1B2A 100%);
  --cs-gradient-hero: radial-gradient(520px 360px at 14% 18%, rgba(0, 174, 239, 0.14), transparent 26%), radial-gradient(500px 340px at 84% 70%, rgba(0, 42, 78, 0.34), transparent 30%), linear-gradient(140deg, rgba(13, 37, 68, 0.94), rgba(0, 74, 122, 0.5), rgba(13, 27, 45, 0.86));
}