/* =========================================================
   ITINERA — Design Tokens (Moss / Cream / Crimson)
   ========================================================= */

@import url('fonts/fonts.css');

:root {
  /* ---------- MOSS (фон, мшистый зелёный) ---------- */
  --moss-0: #1B2620;   /* page base — самый глубокий */
  --moss-1: #232E27;
  --moss-2: #2C382F;
  --moss-3: #38463C;
  --moss-4: #4A584F;
  --moss-5: #6A7770;

  /* ---------- CREAM (текст, тёплый off-white) ---------- */
  --cream-0: #F2EEE4;
  --cream-1: #E5DFCF;
  --cream-2: #C5BEAB;
  --cream-3: #948D7E;
  --cream-4: #5F594F;

  /* ---------- CRIMSON (акцент, как платье на фото) ---------- */
  --crimson:        #B53747;
  --crimson-bright: #D24A5C;
  --crimson-dim:    #872332;
  --crimson-ink:    #F2EEE4;

  /* ---------- BRASS (вспомогательный) ---------- */
  --brass:     #C2A672;
  --brass-dim: #8E7A50;

  /* ---------- SEMANTIC ---------- */
  --bg-page:       var(--moss-0);
  --bg-surface:    var(--moss-1);
  --bg-card:       var(--moss-2);
  --bg-card-hover: var(--moss-3);
  --bg-input:      var(--moss-1);

  --fg-primary:   var(--cream-0);
  --fg-secondary: var(--cream-1);
  --fg-muted:     var(--cream-2);
  --fg-disabled:  var(--cream-3);

  --border-subtle:  rgba(242, 238, 228, 0.08);
  --border-default: rgba(242, 238, 228, 0.14);
  --border-strong:  rgba(242, 238, 228, 0.22);

  --success: #8FAF8E;
  --warn:    #C2A672;
  --danger:  var(--crimson);

  /* ---------- TYPE ---------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-hero:      clamp(72px, 13vw, 200px);
  --fs-display-l: 72px;
  --fs-display-m: 56px;
  --fs-h1:        48px;
  --fs-h2:        36px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-body-l:    19px;
  --fs-body:      17px;
  --fs-body-s:    15px;
  --fs-caption:   13px;
  --fs-micro:     11px;

  --lh-tight:   1.02;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-hero:   -0.04em;
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.18em;

  /* ---------- SPACING ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --section-y: 128px;

  /* ---------- RADII ---------- */
  --r-none: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --r-full: 999px;

  /* ---------- SHADOWS (на тёмном — почти невидимые, лишь hairline) ---------- */
  --shadow-hairline: inset 0 1px 0 rgba(242, 238, 228, 0.04);
  --shadow-card:     0 1px 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(242, 238, 228, 0.04);
  --shadow-raised:   0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(242, 238, 228, 0.06);

  --focus-ring: 0 0 0 2px var(--moss-0), 0 0 0 4px var(--crimson);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --container:        1200px;
  --container-wide:   1320px;
  --container-narrow: 880px;
  --gutter: 24px;
}

@media (max-width: 768px) {
  :root { --section-y: 80px; --gutter: 20px; }
}

/* =========================================================
   BASE ELEMENTS
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--moss-3) transparent;
  scrollbar-width: thin;
}

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 90% 40% at 20% 0%, rgba(56, 70, 60, 0.55), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 30%, rgba(74, 88, 79, 0.30), transparent 65%),
    radial-gradient(ellipse 80% 50% at 0% 65%, rgba(45, 60, 50, 0.45), transparent 70%),
    radial-gradient(ellipse 100% 60% at 70% 100%, rgba(58, 75, 62, 0.40), transparent 70%),
    var(--bg-page);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  font-variation-settings: 'opsz' 144;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  font-variation-settings: normal;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
}

small { font-size: var(--fs-caption); color: var(--fg-muted); }

em, .italic-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--fg-primary);
}

.eyebrow, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
a:hover { text-decoration-color: var(--crimson); color: var(--crimson-bright); }

button { font-family: inherit; }

::selection { background: var(--crimson); color: var(--crimson-ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}