/* ============================================================
   Charysh Design System — colors & type tokens
   Source of truth: Charish_Guidebook.pdf (40-page brand manual, 2025).
   See README.md §4 VISUAL FOUNDATIONS and §6 CAVEATS for the
   substitution notes (Geometria → Manrope, Dobrozrachniy → serif fallback).
   ============================================================ */

/* ---- Real brand webfonts (provided by the brand team) ----
   Geometria — body / UI / Medium for headings (per guidebook §1.3)
   Dobrozrachniy — display / wordmark / large headlines (logo basis, §1.1)
   Manrope kept loaded as a robust fallback during font swap.
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Geometria';
  src: url('./fonts/Geometria.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geometria';
  src: url('./fonts/Geometria-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* Geometria Bold not yet provided — fall back to Medium synthesised bold via Manrope-700 weight. */
@font-face {
  font-family: 'Dobrozrachniy';
  src: url('./fonts/Dobrozrachniy-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ============================================================
     COLOR — three pure values, plus optional gold finish.
     ============================================================ */

  /* Brand primitives (do not invent intermediate shades) */
  --charysh-red:    #87000d;   /* C28 M100 Y98 K36 — primary accent */
  --charysh-black:  #000000;   /* C91 M79 Y62 K97 — ink */
  --charysh-white:  #ffffff;   /* paper */
  --charysh-gold:   #b48a3c;   /* on-screen approximation of foil/emboss gold */

  /* Hover / press state derivatives — only these are allowed */
  --charysh-red-hover:   #5e0009;
  --charysh-red-pressed: #420006;
  --charysh-black-hover: #1a1a1a;

  /* Surface colours */
  --surface-paper:   var(--charysh-white);
  --surface-ink:     var(--charysh-black);
  --surface-accent:  var(--charysh-red);

  /* Hairline / divider — always 1px, always solid */
  --hairline-ink:    var(--charysh-black);
  --hairline-accent: var(--charysh-red);

  /* Foreground tokens */
  --fg-1: var(--charysh-black);   /* primary text */
  --fg-2: #3a3a3a;                /* secondary text — used sparingly */
  --fg-mute: #6b6b6b;             /* footers, page numbers, captions */
  --fg-on-red: var(--charysh-white);
  --fg-on-black: var(--charysh-white);
  --fg-accent: var(--charysh-red);

  /* Background tokens */
  --bg-1: var(--charysh-white);
  --bg-accent: var(--charysh-red);
  --bg-ink: var(--charysh-black);

  /* Photography overlay (the only allowed transparency) */
  --photo-protect-top: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  --photo-protect-btm: linear-gradient(0deg,   rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);

  /* ============================================================
     TYPE — Geometria (substituted by Manrope until real files arrive)
     One family, three weights, strict roles.
     ============================================================ */

  --font-sans:    'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Dobrozrachniy', 'Geometria', 'Manrope', serif;  /* headings + wordmark */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Type scale — minor third (1.2). Set at 16px base. */
  --fs-12: 12px;   /* footer, page numbers, fine print */
  --fs-14: 14px;   /* small captions */
  --fs-16: 16px;   /* body */
  --fs-18: 18px;   /* lead */
  --fs-22: 22px;   /* h6 / sub-section */
  --fs-28: 28px;   /* h4 */
  --fs-36: 36px;   /* h3 */
  --fs-48: 48px;   /* h2 */
  --fs-64: 64px;   /* h1 */
  --fs-96: 96px;   /* hero / tagline */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  /* Tracking */
  --tracking-tagline: 0.1em;   /* the +10 tracking from the guidebook */
  --tracking-caps:    0.04em;
  --tracking-body:    0;

  /* ============================================================
     SPACING — 4px base, generous editorial scale
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Logo clear space — half the wordmark's height (the "Ш" module from the guidebook) */
  --logo-clearspace: 0.5em;

  /* ============================================================
     RADII — print system has no curves; digital allows minimal.
     ============================================================ */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;   /* maximum allowed; reserved for input fields */

  /* ============================================================
     ELEVATION — the brand is flat. One subtle hairline shadow only.
     ============================================================ */
  --elevation-0: none;
  --elevation-1: 0 1px 0 rgba(0, 0, 0, 0.06);   /* sticky headers only */

  /* ============================================================
     MOTION
     ============================================================ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --header-h-desktop: 80px;
  --header-h-mobile:  56px;
  --content-max:      1200px;
  --gutter-desktop:   48px;
  --gutter-mobile:    20px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.charysh-tagline {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tagline);
  font-size: clamp(48px, 7vw, 96px);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  margin: 0;
}
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  margin: 0;
}
.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
}
.caption {
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  color: var(--fg-mute);
}
.footnote, .pagefooter {
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-mute);
  letter-spacing: var(--tracking-caps);
}

/* The pipe-separator mannerism — `1.1 | Базовые элементы | Логотип` */
.charysh-breadcrumb {
  font-size: var(--fs-12);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-caps);
  color: var(--fg-1);
  text-transform: none;
}
.charysh-breadcrumb .num { font-variant-numeric: tabular-nums; }
.charysh-breadcrumb .sep { margin: 0 8px; color: var(--fg-mute); }

/* The wordmark / logo face — Dobrozrachniy. Never used for body text. */
.charysh-wordmark {
  font-family: 'Dobrozrachniy', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.charysh-display {
  font-family: var(--font-display);
  font-weight: 400;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--duration-fast) var(--ease);
}
a:hover { opacity: 0.78; }
a:active { opacity: 0.6; }

/* Selection */
::selection { background: var(--charysh-red); color: var(--charysh-white); }