@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/montserrat-latin-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/montserrat-latin-600.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/montserrat-latin-700.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces */
  --color-bg: #0d263d;
  --color-surface: #fafafa;
  --color-border: rgb(120 184 194 / 0.33);

  /* Text */
  --color-text: rgb(5 5 5 / 0.65);
  --color-text-hover: #0d263d;
  --color-text-strong: #0d263d;
  --color-text-on-bg: rgb(250 250 250 / 0.95);
  --color-text-on-bg-muted: rgb(250 250 250 / 0.72);

  /* Brand */
  --color-primary-highlight: #e8ba00;
  --color-primary-soft: #fce8c2;
  --color-accent: #78b8c2;
  --color-secondary: #007057;
  --gradient-accent-secondary: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-secondary)
  );

  /* Opacity */
  --opacity-strong: 0.95;
  --opacity-medium: 0.6;
  --opacity-none: 0;

  /* Masks */
  --mask-fade-bottom: linear-gradient(
    to bottom,
    rgb(0 0 0 / var(--opacity-strong)) 0%,
    rgb(0 0 0 / var(--opacity-medium)) 45%,
    rgb(0 0 0 / var(--opacity-none)) 86%
  );

  /* Space (rem scale) */
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-2-5: 0.35rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 2.5rem;
  --space-7: 3rem;
  --space-gutter: var(--space-5);

  /* Dimensions */
  --width-content: 72rem;
  --width-prose: 48rem;
  --dimension-sm: 2.125rem;
  --dimension-md: 3.25rem;
  --dimension-fluid-lg: clamp(11rem, 38vw, 22rem);
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius-sm: 0.375rem;
  --layer-fixed: 1000;

  /* Type — family + weight */
  --font-sans: "Montserrat", "Avenir Next", "Segoe UI", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type — size (fluid) */
  --font-size-xs: clamp(0.5625rem, 0.5rem + 0.25vw, 0.625rem);
  --font-size-sm: clamp(0.6875rem, 0.625rem + 0.3vw, 0.8125rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.45vw, 1.25rem);
  --font-size-lg: clamp(1.375rem, 1.1rem + 1.8vw, 1.875rem);
  --font-size-fluid-lg: clamp(1.25rem, 3vw, 1.875rem);
  --font-size-fluid-xl: clamp(2rem, 5vw, 3rem);

  /* Type — leading */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Type — roles (weight size / line-height family) */
  --type-body: var(--font-weight-regular) var(--font-size-base) /
    var(--line-height-normal) var(--font-sans);
  --type-label: var(--font-weight-bold) var(--font-size-sm) /
    var(--line-height-snug) var(--font-sans);
  --type-display: var(--font-weight-bold) var(--font-size-fluid-xl) /
    var(--line-height-tight) var(--font-sans);
  --type-subtitle: var(--font-weight-semibold) var(--font-size-fluid-lg) /
    var(--line-height-snug) var(--font-sans);
  --type-heading: var(--font-weight-bold) var(--font-size-lg) /
    var(--line-height-snug) var(--font-sans);
  --type-prose: var(--font-weight-regular) var(--font-size-base) /
    var(--line-height-relaxed) var(--font-sans);
  --type-prose-lead: var(--font-weight-regular) var(--font-size-md) /
    var(--line-height-relaxed) var(--font-sans);
  --type-prose-emphasis: var(--font-weight-bold) var(--font-size-md) /
    var(--line-height-relaxed) var(--font-sans);
  --type-caption: var(--font-weight-regular) var(--font-size-sm) /
    var(--line-height-snug) var(--font-sans);

  --letter-spacing-tight: -0.01em;
}