:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;

  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.2rem;
  --radius-pill: 999px;

  --font-sans: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --type-display-size: clamp(2rem, 4.4vw, 3.15rem);
  --type-display-line: 1.1;
  --type-h1-size: clamp(1.6rem, 3vw, 2.1rem);
  --type-h1-line: 1.2;
  --type-h2-size: clamp(1.2rem, 2vw, 1.45rem);
  --type-h2-line: 1.3;
  --type-h3-size: 1.125rem;
  --type-h3-line: 1.4;
  --type-h4-size: 1rem;
  --type-h4-line: 1.4;
  --type-body-lg-size: 1.0625rem;
  --type-body-lg-line: 1.55;
  --type-body-size: 1rem;
  --type-body-line: 1.6;
  --type-body-sm-size: 0.875rem;
  --type-body-sm-line: 1.5;
  --type-caption-size: 0.75rem;
  --type-caption-line: 1.4;
  --type-label-size: 0.8125rem;
  --type-label-line: 1.4;

  --color-surface: #f5f7fa;
  --color-surface-muted: #edf1f5;
  --color-surface-raised: #ffffff;
  --color-border: #d8dde6;
  --color-border-strong: #b9c1cf;
  --color-text-primary: #172b4d;
  --color-text-secondary: #3f4e67;
  --color-text-muted: #66758c;
  --color-text-inverse: #ffffff;
  --color-action-primary: #009cdb;
  --color-action-secondary: #2f5e7a;
  --color-action-muted: #dff3fb;
  --color-action-destructive: #b42318;
  --color-action-success: #027a48;
  --color-action-warning: #b54708;
  --color-action-info: #175cd3;
  --color-focus-ring: #009cdb;
  --color-overlay: rgba(15, 23, 42, 0.42);

  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.05);
  --elevation-2: 0 8px 24px rgba(15, 23, 42, 0.1);
  --elevation-3: 0 16px 40px rgba(15, 23, 42, 0.14);
  --elevation-4: 0 24px 56px rgba(15, 23, 42, 0.18);

  --grid-container: 72rem;
  --grid-columns: 12;
  --grid-gutter: var(--space-5);
  --grid-margin: var(--space-4);
  --grid-row-gap: var(--space-6);
  --grid-column-gap: var(--space-6);
  --grid-breakpoint-sm: 40rem;
  --grid-breakpoint-md: 56rem;
  --grid-breakpoint-lg: 72rem;
  --grid-breakpoint-xl: 84rem;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}