/* ============================================================
   Люди Любви — Design Tokens
   colors + typography + spacing + shadows + radii
   ============================================================ */

/* Web fonts — Spectral (display serif) + Onest (body sans).
   Both have full Cyrillic coverage. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Onest:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND COLORS (pure, natural) ---------- */
  --sun:        #F4C430;  /* solnečno-žёltyj — main accent */
  --sun-deep:   #DDA816;  /* hovered / pressed sun */
  --sun-soft:   #FFF1C2;  /* sun glow / wash */

  --heart:      #E23A3A;  /* čisto-krasnyj — used sparingly */
  --heart-deep: #B92626;
  --heart-soft: #FAD9D9;

  --leaf:       #3FA34D;  /* čisto-zelёnyj */
  --leaf-deep:  #2C7C37;
  --leaf-soft:  #D8EBD7;

  --sky:        #3AA7E0;  /* čisto-goluboj */
  --sky-deep:   #1F7BB0;
  --sky-soft:   #D7ECF8;

  /* ---------- NEUTRALS (warm, paper-toned) ---------- */
  --paper:      #FBF7F0;  /* page background */
  --paper-deep: #F2EBDD;  /* card / divider tint */
  --white:      #FFFFFF;
  --line:       #E6DFD0;  /* hairline borders */
  --line-soft:  #EFE9DC;

  --ink:        #1B1B1B;  /* primary text */
  --ink-soft:   #4A4A4A;
  --ink-mute:   #8A847A;
  --ink-faint:  #B5AFA3;

  /* ---------- SEMANTIC ---------- */
  --accent:     var(--sun);
  --positive:   var(--leaf);
  --danger:     var(--heart);
  --info:       var(--sky);

  --bg:         var(--paper);
  --fg:         var(--ink);
  --fg-2:       var(--ink-soft);
  --fg-3:       var(--ink-mute);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Spectral', 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Onest', 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* base scale */
  --t-display:  56px;
  --t-h1:       40px;
  --t-h2:       30px;
  --t-h3:       22px;
  --t-lg:       18px;
  --t-md:       16px;
  --t-sm:       14px;
  --t-xs:       12px;

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* ---------- SPACING (tёplaja vozdušnaja škala) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  24px;
  --r-xl:  36px;
  --r-pill: 999px;

  /* ---------- SHADOWS (warm, like leaf on paper) ---------- */
  --shadow-1: 0 1px 2px rgba(70, 55, 30, .06);
  --shadow-2: 0 8px 24px rgba(70, 55, 30, .08);
  --shadow-3: 0 24px 60px rgba(70, 55, 30, .10);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* ---------- MOTION ---------- */
  --ease-leaf: cubic-bezier(.2, .7, .2, 1);  /* leaf-fall easing */
  --ease-snug: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 360ms;

  /* ---------- FOCUS ---------- */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--sun);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--ink);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-sm);
  color: var(--ink-mute);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--t-base) var(--ease-leaf);
}
a:hover { color: var(--sun-deep); }

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* card */
.card-paper {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* button — primary (sun) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sun);
  color: var(--ink);
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-md);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-leaf), transform var(--t-fast) var(--ease-leaf);
}
.btn-primary:hover { background: var(--sun-deep); }
.btn-primary:active { transform: scale(.985); }

/* button — quiet (paper outline) */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 11px 21px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-md);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-leaf);
}
.btn-quiet:hover { background: var(--paper-deep); }

/* chip / tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper-deep);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
}

/* sun glow halo — for hero elements / logo */
.sun-glow {
  background: radial-gradient(circle, var(--sun-soft) 0%, transparent 70%);
}

/* focus */
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}