/* ШЁЛК — Colors & Type foundations
   Substitution note: project ships with Google Fonts (Playfair Display + Inter).
   If the brand owns licensed cuts, drop .woff2 into /fonts and swap @font-face. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---- Palette (strict) ---- */
  --graphite:  #1A1A1A; /* основа — графит */
  --pearl:     #F5F3F0; /* основа — жемчуг (warm, не белый) */
  --coal:      #2B2B2B; /* уголь */
  --smoke:     #6B6B6B; /* дым */
  --silver:    #B8B8B8; /* серебро */
  --champagne: #C9A876; /* акцент — шампань */
  --bronze:    #8B6F47; /* акцент — бронза */

  /* ---- Semantic tokens ---- */
  --bg:          var(--pearl);
  --bg-inverse:  var(--graphite);
  --surface:     var(--pearl);
  --surface-alt: #EFEDE8;       /* a slightly deeper pearl for layered surfaces */
  --fg:          var(--graphite);
  --fg-muted:    var(--smoke);
  --fg-inverse:  var(--pearl);
  --rule:        var(--silver);
  --rule-strong: var(--graphite);
  --accent:      var(--champagne);
  --accent-deep: var(--bronze);

  /* ---- Type families ---- */
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale (fluid within a sensible band) ---- */
  --h1-size: clamp(64px, 6.8vw, 96px);
  --h2-size: clamp(44px, 4.2vw, 60px);
  --h3-size: clamp(28px, 2.6vw, 40px);
  --h4-size: 22px;
  --body-size: 17px;
  --small-size: 14px;
  --caps-size: 12px;

  /* ---- Line heights ---- */
  --lh-display: 1.1;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-tight: 1.3;

  /* ---- Letter spacing ---- */
  --ls-caps: 0.15em;       /* +1.5 for small caps labels */
  --ls-button: 0.12em;
  --ls-display: -0.01em;   /* Playfair wants almost none; a hair tighter looks tailored */

  /* ---- Spacing (8pt base, generous) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;
  --sp-10: 192px;

  /* ---- Radii ---- */
  --radius-0: 0px;         /* default */
  --radius-1: 2px;         /* max allowed */

  /* ---- Borders ---- */
  --hairline: 1px solid var(--rule);
  --hairline-strong: 1px solid var(--rule-strong);

  /* ---- Motion (restrained) ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ---- Base element styles ---- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 var(--sp-4);
  letter-spacing: var(--ls-display);
}

h1 { font-size: var(--h1-size); line-height: var(--lh-display); }
h2 { font-size: var(--h2-size); line-height: var(--lh-heading); }
h3 { font-size: var(--h3-size); line-height: var(--lh-heading); font-weight: 500; }
h4 { font-size: var(--h4-size); line-height: var(--lh-tight); font-weight: 500; }

p { margin: 0 0 var(--sp-3); max-width: 62ch; }

/* Utility classes — the semantic API for design work */
.caps {
  font-family: var(--font-sans);
  font-size: var(--caps-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg);
}
.caps-muted { color: var(--fg-muted); }

.lede {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.55;
  color: var(--fg);
  font-weight: 300;
  max-width: 54ch;
}

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

.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-5) 0; width: 96px; }
.rule--full { width: 100%; }
.rule--strong { border-top-color: var(--rule-strong); }

/* Links — underline on hover only, never blue */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--silver);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { border-bottom-color: var(--graphite); }

/* Selection uses champagne, restrained */
::selection { background: var(--champagne); color: var(--graphite); }