@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.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 {
  /* Brand palette — Pochinyay Brandbook v1.0, page 11. */
  --brand-navy-700: #082e68;
  --brand-blue-600: #176bff;
  --brand-teal-500: #11bcbc;
  --brand-ink-950: #08182f;
  --brand-cloud-50: #f6fafd;
  --brand-white: #ffffff;
  --brand-line-200: #d8e4ee;

  /* Semantic colors — page 12. */
  --semantic-success: #168a62;
  --semantic-warning: #b66b00;
  --semantic-danger: #c73e4e;

  /* Light semantic theme — page 16. */
  --color-bg: #f6fafd;
  --color-surface: #ffffff;
  --color-surface-subtle: #ecf4fa;
  --color-text: #08182f;
  --color-text-muted: #60758b;
  --color-border: #d8e4ee;
  --color-primary: #176bff;
  --color-primary-hover: #0e5ee8;
  --color-primary-contrast: #ffffff;
  --color-accent: #11bcbc;
  --color-success: #168a62;
  --color-warning: #b66b00;
  --color-danger: #c73e4e;
  --color-focus: #176bff;
  --color-overlay: rgb(8 24 47 / 48%);

  /* Spacing and shape — page 15. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 4px 16px rgb(8 46 104 / 8%);
  --shadow-md: 0 16px 48px rgb(8 46 104 / 12%);

  /* Typography — pages 13–14. */
  --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --text-hero-size: 56px;
  --text-hero-line: 60px;
  --text-h1-size: 40px;
  --text-h1-line: 48px;
  --text-h2-size: 28px;
  --text-h2-line: 36px;
  --text-lead-size: 20px;
  --text-lead-line: 30px;
  --text-body-size: 16px;
  --text-body-line: 26px;
  --text-caption-size: 14px;
  --text-caption-line: 20px;

  /* Motion — page 15. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #08111f;
    --color-surface: #101c2c;
    --color-surface-subtle: #17263a;
    --color-text: #f5faff;
    --color-text-muted: #a7b8c8;
    --color-border: #2a3c52;
    --color-primary: #66a2ff;
    --color-primary-hover: #80b2ff;
    --color-primary-contrast: #08182f;
    --color-accent: #37d8d0;
    --color-success: #55c99a;
    --color-warning: #f0b45c;
    --color-danger: #ff8794;
    --color-focus: #66a2ff;
    --color-overlay: rgb(2 8 18 / 72%);
    --shadow-sm: 0 4px 16px rgb(0 0 0 / 20%);
    --shadow-md: 0 16px 48px rgb(0 0 0 / 28%);
  }
}