/* ============================================================
   Мастер Кровли — Design System
   Медная кровля · Гибка из меди · Строительство
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* --- Color: warm graphite & copper --- */
  --ink:        #1A1611;   /* warm near-black */
  --ink-2:      #221C15;   /* raised dark surface */
  --ink-3:      #2E261C;   /* dark border / line */
  --soot:       #0F0C09;   /* deepest */

  --paper:      #F4EFE6;   /* cream paper */
  --paper-2:    #FBF8F2;   /* off-white */
  --paper-warm: #ECE5D7;   /* warmer paper / cards */

  --copper:      #BD6B38;  /* primary accent */
  --copper-deep: #9E5429;  /* hover / pressed */
  --copper-lite: #D89B6A;  /* metallic highlight */
  --copper-glow: #E7B98C;  /* tint */

  --patina:      #5E8576;  /* oxidized copper green (secondary) */
  --patina-deep: #466357;

  /* --- Warm neutrals --- */
  --stone-900: #2A241D;
  --stone-700: #4A4239;
  --stone-600: #5C5347;
  --stone-500: #6E6557;
  --stone-400: #8C8378;
  --stone-300: #B0A795;
  --stone-200: #CFC7B8;

  /* --- Functional, theme-agnostic (overridden per theme) --- */
  --bg:        var(--paper);
  --surface:   var(--paper-2);
  --text:      var(--ink);
  --text-soft: var(--stone-500);
  --line:      rgba(26,22,17,0.12);
  --line-soft: rgba(26,22,17,0.07);
  --accent:    var(--copper);

  /* --- Type --- */
  --display: 'Cormorant', Georgia, serif;
  --sans:    'Manrope', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- Type scale (fluid) --- */
  --t-mega:   clamp(3.5rem, 9vw, 8.5rem);
  --t-h1:     clamp(2.6rem, 6vw, 5.2rem);
  --t-h2:     clamp(2rem, 4vw, 3.4rem);
  --t-h3:     clamp(1.4rem, 2.4vw, 2.1rem);
  --t-lead:   clamp(1.15rem, 1.6vw, 1.4rem);
  --t-body:   1.0625rem;
  --t-small:  0.875rem;
  --t-micro:  0.75rem;

  /* --- Spacing --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --sp-7: 9rem;

  /* --- Radius (restrained, architectural) --- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* --- Shadow (warm) --- */
  --sh-sm: 0 1px 2px rgba(26,22,17,0.06), 0 2px 8px rgba(26,22,17,0.05);
  --sh-md: 0 4px 14px rgba(26,22,17,0.10), 0 18px 40px rgba(26,22,17,0.08);
  --sh-lg: 0 12px 30px rgba(26,22,17,0.14), 0 40px 80px rgba(26,22,17,0.14);

  /* --- Layout --- */
  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark theme scope */
.theme-dark {
  --bg:        var(--ink);
  --surface:   var(--ink-2);
  --text:      var(--paper);
  --text-soft: var(--stone-300);
  --line:      rgba(244,239,230,0.13);
  --line-soft: rgba(244,239,230,0.07);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
::selection { background: var(--copper); color: #fff; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.display { font-family: var(--display); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; }
.mega   { font-family: var(--display); font-weight: 500; font-size: var(--t-mega); line-height: 0.95; letter-spacing: -0.02em; }
h1, .h1 { font-family: var(--display); font-weight: 500; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.015em; }
h2, .h2 { font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.01em; }
h3, .h3 { font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.15; }
.lead   { font-size: var(--t-lead); line-height: 1.5; color: var(--text-soft); font-weight: 400; }

/* Mono technical label */
.label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-soft);
}
.label--copper { color: var(--copper); }

.serif-em { font-family: var(--display); font-style: italic; font-weight: 400; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1480px; }
.section { padding-block: clamp(4rem, 9vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.rule { height: 1px; background: var(--line); border: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.95em 1.7em;
  border-radius: var(--r-sm);
  transition: all 0.4s var(--ease);
  position: relative; white-space: nowrap;
}
.btn .arr { transition: transform 0.4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn--primary { background: var(--copper); color: #fff; }
.btn--primary:hover { background: var(--copper-deep); transform: translateY(-2px); box-shadow: var(--sh-md); }

.btn--ghost { border: 1px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--copper); color: var(--copper); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--soot); transform: translateY(-2px); }

.btn--lg { padding: 1.1em 2em; font-size: 1.02rem; }

/* Text link with underline reveal */
.link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; color: var(--copper);
  position: relative;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link .arr { transition: transform 0.4s var(--ease); }
.link:hover .arr { transform: translateX(3px); }

/* ============================================================
   BADGES / CHIPS / TAGS
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.45em 0.85em; border: 1px solid var(--line);
  border-radius: 100px; color: var(--text-soft);
}
.chip--copper { border-color: var(--copper); color: var(--copper); }
.chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--copper); }

/* Eyebrow with line */
.eyebrow { display: inline-flex; align-items: center; gap: 0.8em; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--copper); }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: all 0.5s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line); }

/* ============================================================
   IMAGE PLACEHOLDER (copper / architectural)
   ============================================================ */
.ph {
  position: relative; overflow: hidden; background: var(--ink-2);
  border-radius: var(--r-md);
}
.ph__inner {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(189,107,56,0.0) 0%, rgba(189,107,56,0.22) 55%, rgba(158,84,41,0.35) 100%),
    repeating-linear-gradient(118deg, #2a2018 0px, #2a2018 12px, #211912 12px, #211912 24px);
}
.ph--patina .ph__inner {
  background:
    linear-gradient(135deg, rgba(94,133,118,0.12) 0%, rgba(70,99,87,0.4) 100%),
    repeating-linear-gradient(118deg, #2a2820 0px, #2a2820 12px, #232119 12px, #232119 24px);
}
.ph__label {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244,239,230,0.72);
  display: flex; align-items: center; gap: 0.5em;
}
.ph__label::before { content: ''; width: 16px; height: 16px; border: 1px solid rgba(244,239,230,0.4); border-radius: 2px; }

/* ============================================================
   FORM
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); }
.input, .textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 0.7em 0.1em; transition: border-color 0.3s var(--ease);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--copper); }
.input::placeholder, .textarea::placeholder { color: var(--stone-400); }
.textarea { resize: vertical; min-height: 90px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.muted { color: var(--text-soft); }
.copper { color: var(--copper); }
.center { text-align: center; }
.measure { max-width: 60ch; }
.measure-sm { max-width: 44ch; }

/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Lang visibility */
[data-en] { display: none; }
html[lang="en"] [data-en] { display: revert; }
html[lang="en"] [data-ru] { display: none; }