@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/InterVariable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* CLEXIT brand */
  --color-brand: #00d4e6;
  --color-brand-strong: #007f8c;
  --color-brand-pressed: #00b8c9;
  --color-brand-soft: #ccf1f6;

  /* Product accents */
  --color-contract: #276aa6;
  --color-contract-soft: #dcecf9;
  --color-document: #6c55b5;
  --color-document-soft: #e9e4fa;

  /* Semantic colors */
  --color-canvas: #f5f5f7;
  --color-surface: #ffffff;
  --color-surface-muted: #eef2f3;
  --color-text: #071c33;
  --color-text-muted: #5c6f7e;
  --color-border: #dfe4e6;
  --color-navy: #0a1a1f;
  --color-navy-deep: #06151c;
  --color-navy-surface: #0e3d46;
  --color-on-dark: #f6fbfc;
  --color-on-dark-muted: #a9bec3;
  --color-focus: #007f8c;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter',
    'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: clamp(1.0625rem, 1rem + 0.24vw, 1.25rem);
  --font-size-xl: clamp(1.5rem, 1.22rem + 1vw, 2.15rem);
  --font-size-section: clamp(2.65rem, 1.8rem + 3.25vw, 5rem);
  --font-size-display: clamp(3.55rem, 2.45rem + 5vw, 6.5rem);
  --line-height-tight: 0.94;
  --line-height-heading: 1.04;
  --line-height-body: 1.5;
  --letter-spacing-tight: -0.052em;
  --letter-spacing-heading: -0.042em;
  --letter-spacing-label: 0.09em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(6rem, 9vw, 9.5rem);

  /* Layout */
  --page-gutter: clamp(1.25rem, 3.2vw, 3.5rem);
  --content-width: 78rem;
  --text-width: 42rem;
  --header-height: 4.25rem;

  /* Shape and depth */
  --radius-sm: 0.9rem;
  --radius-md: 1.5rem;
  --radius-lg: 2rem;
  --radius-xl: 2.75rem;
  --shadow-float: 0 1.75rem 4.5rem rgb(7 28 51 / 0.1);
  --shadow-device: 0 2.5rem 6rem rgb(0 0 0 / 0.32);

  /* Motion */
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 760ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}