@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;

  --cs-red: #C53A28;
  --cs-midnight: #050505;
  --cs-carbon: #111111;
  --cs-cloud-white: #F8F8F8;
  --cs-soft-white: #EDEDED;
  --cs-light-gray: #A9A9A9;
  --cs-medium-gray: #6F6F6F;
  --cs-border-gray: #D7D7D7;

  --cs-bg: var(--cs-midnight);
  --cs-bg-alt: var(--cs-carbon);
  --cs-surface: #141414;
  --cs-surface-raised: #1A1A1A;
  --cs-surface-strong: #1A1A1A;
  --cs-surface-inverse: var(--cs-cloud-white);
  --cs-text: var(--cs-soft-white);
  --cs-text-muted: var(--cs-light-gray);
  --cs-text-subtle: #7F7F7F;
  --cs-border: rgba(237, 237, 237, 0.14);
  --cs-border-strong: rgba(237, 237, 237, 0.24);
  --cs-grid-line: rgba(169, 169, 169, 0.045);
  --cs-accent: var(--cs-red);
  --cs-accent-hover: #A92F21;
  --cs-accent-soft: rgba(197, 58, 40, 0.14);
  --cs-accent-ring: rgba(197, 58, 40, 0.36);
  --cs-header-bg: rgba(5, 5, 5, 0.84);
  --cs-footer-bg: var(--cs-midnight);
  --cs-overlay: rgba(5, 5, 5, 0.72);
  --cs-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.18);
  --cs-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.24);
  --cs-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.32);

  --cs-font-heading: "Space Grotesk", "DM Sans", sans-serif;
  --cs-font-body: "DM Sans", "Space Grotesk", sans-serif;
  --cs-font-label: "JetBrains Mono", monospace;
  --cs-font-mono: var(--cs-font-label);
  --cs-font-accent: "Instrument Serif", Georgia, serif;

  --cs-container-max: 1180px;
  --cs-container-gutter: 32px;
  --cs-section-xl: 88px;
  --cs-section-lg: 72px;
  --cs-section-md: 56px;
  --cs-section-sm: 40px;
  --cs-gap-xs: 8px;
  --cs-gap-sm: 12px;
  --cs-gap-md: 18px;
  --cs-gap-lg: 24px;
  --cs-gap-xl: 32px;

  --cs-radius-xs: 6px;
  --cs-radius-sm: 8px;
  --cs-radius-md: 10px;
  --cs-radius-lg: 14px;
  --cs-radius-pill: 999px;
  --cs-card-radius: 10px;
  --cs-card-padding: 20px;
  --cs-btn-height: 50px;

  --cs-h1: clamp(40px, 4.6vw, 62px);
  --cs-h2: clamp(32px, 3.5vw, 46px);
  --cs-h3: clamp(22px, 2vw, 30px);
  --cs-card-title: clamp(18px, 1.45vw, 22px);
  --cs-body: clamp(15px, 1vw, 16px);
  --cs-small: clamp(13px, 0.9vw, 14px);
  --cs-label: 12px;

  --cs-line-hero: 1.02;
  --cs-line-heading: 1.08;
  --cs-line-title: 1.18;
  --cs-line-body: 1.65;

  --cs-duration-micro: 150ms;
  --cs-duration-hover: 250ms;
  --cs-duration-transition: 350ms;
  --cs-duration-reveal: 560ms;
  --cs-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="light"] {
  color-scheme: light;

  --cs-bg: var(--cs-cloud-white);
  --cs-bg-alt: #FFFFFF;
  --cs-surface: #FFFFFF;
  --cs-surface-raised: var(--cs-cloud-white);
  --cs-surface-strong: var(--cs-cloud-white);
  --cs-surface-inverse: var(--cs-midnight);
  --cs-text: var(--cs-carbon);
  --cs-text-muted: var(--cs-medium-gray);
  --cs-text-subtle: #828282;
  --cs-border: var(--cs-border-gray);
  --cs-border-strong: #BEBEBE;
  --cs-grid-line: rgba(111, 111, 111, 0.08);
  --cs-accent: var(--cs-red);
  --cs-accent-hover: #A92F21;
  --cs-accent-soft: rgba(197, 58, 40, 0.1);
  --cs-accent-ring: rgba(197, 58, 40, 0.28);
  --cs-header-bg: rgba(248, 248, 248, 0.88);
  --cs-footer-bg: var(--cs-midnight);
  --cs-overlay: rgba(248, 248, 248, 0.72);
  --cs-shadow-sm: 0 8px 18px rgba(17, 17, 17, 0.06);
  --cs-shadow-md: 0 14px 30px rgba(17, 17, 17, 0.08);
  --cs-shadow-lg: 0 20px 48px rgba(17, 17, 17, 0.1);
}