@font-face {
  font-family: "Encode Sans";
  src: url("../assets/fonts/encode-sans-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Encode Sans";
  src: url("../assets/fonts/encode-sans-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Encode Sans";
  src: url("../assets/fonts/encode-sans-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Encode Sans";
  src: url("../assets/fonts/encode-sans-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-graphite: #111827;
  --color-background: #f7f7f3;
  --color-surface: #ffffff;
  --color-accent: #19b394;
  --color-muted: #6b7280;

  --color-border: rgba(17, 24, 39, 0.12);
  --color-border-strong: rgba(17, 24, 39, 0.2);

  --font-primary: "Encode Sans", Arial, Helvetica, sans-serif;

  --container: 1440px;
  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);

  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-round: 999px;

  --shadow-soft:
    0 30px 80px rgba(17, 24, 39, 0.08),
    0 8px 24px rgba(17, 24, 39, 0.05);

  --transition-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-medium: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}