/*
Theme Name: Альтернатива
Theme URI: https://example.invalid/alternativa
Author: Альтернатива
Description: Блочная тема дизайн-бюро «Альтернатива».
Version: 0.1.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: alternativa
*/

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-variable.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-variable.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300 700;
}

:root {
  color-scheme: light;
  --alt-color-background: #e7e4df;
  --alt-color-surface: #eeeae5;
  --alt-color-surface-secondary: #d8d3cd;
  --alt-color-text: #181716;
  --alt-color-text-secondary: #3e3a37;
  --alt-color-text-muted: #78716b;
  --alt-color-border: rgba(24, 23, 22, 0.32);
  --alt-color-accent: #57413d;
  --alt-color-accent-hover: #40302d;
  --alt-color-button-background: #5a3b3a;
  --alt-color-button-text: #f0ece7;
  --alt-color-input-background: #eeeae5;
  --alt-color-input-border: rgba(24, 23, 22, 0.35);
  --alt-color-menu-background: #57413d;
  --alt-color-menu-text: #f0ece7;
  --alt-color-hero-text: #f2eee8;
  --alt-page-gutter: clamp(1rem, 1.7vw, 2rem);
  --alt-header-height: clamp(4rem, 4.7vw, 4.8rem);
  --alt-type-h2: clamp(38px, 3vw, 46px);
  --alt-type-h3: clamp(22px, 1.7vw, 26px);
  --alt-type-body-large: clamp(16px, 1.2vw, 18px);
  --alt-type-body: clamp(15px, 1vw, 16px);
  --alt-type-small: clamp(12px, .9vw, 14px);
  --alt-type-label: clamp(11px, .78vw, 12px);
  --alt-leading-display: 1.08;
  --alt-leading-heading: 1.16;
  --alt-leading-body: 1.55;
  --alt-leading-label: 1.3;
  --alt-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --alt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --alt-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (max-width: 1023px) {
  :root {
    --alt-type-h2: clamp(30px, 4.8vw, 38px);
    --alt-type-h3: clamp(21px, 3.1vw, 24px);
    --alt-type-body-large: clamp(16px, 2.2vw, 18px);
    --alt-type-body: 16px;
  }
}

body {
  margin: 0;
  background: var(--alt-color-background);
  color: var(--alt-color-text);
  font-family: "Onest", Arial, sans-serif;
  overflow-x: clip;
}

a {
  color: var(--alt-color-accent);
}

a:hover {
  color: var(--alt-color-accent-hover);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--alt-color-accent);
  outline-offset: 2px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}