/* =====================================================
   ПЛАТФОРМА · Александр Лисовой · alexlisovoy.ru
   Единый визуальный язык — книга, метод МТБ, статьи
   ===================================================== */

/* ---------- FONTS ---------- */
/* Body — Fira Sans Compressed (uploaded .otf) */
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-Book.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-BookItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Compressed';
  src: url('fonts/FiraSansCompressed-HeavyItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Display CAPS — Bebas Neue (uploaded .otf) */
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Cormorant + Montserrat from Google Fonts — no .otf uploaded, matches original StyleGuide exactly */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;1,500;1,600&family=Montserrat:wght@900&display=swap');

/* =====================================================
   TOKENS
   ===================================================== */
:root {
  /* ---------- COLORS · surfaces ---------- */
  --bg-warm:  #F5F1EC;   /* page background (warm beige) */
  --bg-cream: #FAF6F0;   /* section divider, card hover */
  --surface:  #FFFFFF;   /* card "sheet of paper" */
  --bg-dark:  #2A2520;   /* book hero only, rare concept blocks */

  /* ---------- COLORS · ochre accent (point-only) ---------- */
  --accent:        #C8792A;                 /* primary ochre — CTA, em, overline */
  --accent-dark:   #A66220;                 /* hover / active */
  --accent-soft:   rgba(200, 121, 42, 0.08);/* chips, avatar bg */
  --accent-glow:   rgba(245, 179, 106, 0.18); /* radial glow on bg-dark */
  --border-accent: rgba(200, 121, 42, 0.2); /* ochre rules, underlines */

  /* ---------- COLORS · text & lines ---------- */
  --text-dark:       #2C2C2A;  /* fg1 — body & headlines */
  --text-muted:      #8A8880;  /* fg2 — secondary, meta */
  --text-light:      #F5F1EC;  /* text on dark bg */
  --text-muted-dark: #B4B2A9;  /* muted on dark bg */
  --border:          #E8E4DF;  /* hairlines, dividers */

  /* ---------- COLORS · semantic (alias) ---------- */
  --fg1: var(--text-dark);
  --fg2: var(--text-muted);
  --bg1: var(--bg-warm);
  --bg2: var(--bg-cream);
  --line: var(--border);
  --brand: var(--accent);
  --danger: #8B2E1F;          /* dont-card left-border */

  /* ---------- FONTS ---------- */
  --font-serif:   'Cormorant', Georgia, serif;                     /* literary serif — headlines, quotes */
  --font-body:    'Fira Sans Compressed', -apple-system, BlinkMacSystemFont, 'Segoe UI Condensed', sans-serif; /* interface + body */
  --font-heading: 'Bebas Neue', 'Impact', sans-serif;              /* CAPS signal — book only */
  --font-number:  'Montserrat', 'Arial Black', sans-serif;         /* accent numerals */
  --font-mono:    'Courier New', ui-monospace, monospace;          /* hex codes, css vars */

  /* ---------- TYPOGRAPHIC SCALE ---------- */
  --text-display: 400 104px/0.95 var(--font-heading);   /* Bebas — book hero ONLY */
  --text-hero:    500 72px/1.0   var(--font-serif);     /* Cormorant hero */
  --text-section: 500 48px/1.1   var(--font-serif);     /* section title */
  --text-h1:      500 36px/1.15  var(--font-serif);
  --text-h2:      500 28px/1.25  var(--font-serif);     /* italic */
  --text-h3:      500 20px/1.3   var(--font-body);      /* sans sub-head */
  --text-body-lg: 400 19px/1.65  var(--font-body);
  --text-body:    400 17px/1.65  var(--font-body);
  --text-body-sm: 400 15px/1.55  var(--font-body);
  --text-caption: 400 13px/1.5   var(--font-body);
  --text-overline: 500 13px/1.3  var(--font-body);      /* + letter-spacing 2.5px, uppercase */
  --text-num-hero: 900 96px/0.9  var(--font-number);    /* big-stat */
  --text-num-meta: 900 44px/1    var(--font-number);    /* hero meta num */
  --text-quote:    500 italic 28px/1.45 var(--font-serif);

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;   /* section padding */

  /* ---------- RADII ---------- */
  --radius-xs: 3px;    /* chips, book-cover edges */
  --radius-sm: 4px;    /* buttons, inputs */
  --radius-md: 6px;    /* swatches, dont-cards */
  --radius-lg: 8px;    /* cards, type-card */

  /* ---------- SHADOWS (used rarely — system is rule-based, not shadow-based) ---------- */
  --shadow-photo: 0 20px 60px rgba(42, 37, 32, 0.15), 0 8px 24px rgba(42, 37, 32, 0.08); /* photos only */
  --shadow-hover: 0 4px 16px rgba(42, 37, 32, 0.06);  /* minimal card lift */
  --shadow-book:  0 40px 80px rgba(0,0,0,0.55), 0 0 80px rgba(200, 121, 42, 0.15); /* book cover mock */

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-med:  0.4s;
  --dur-slow: 0.6s;

  /* ---------- LAYOUT ---------- */
  --container:         1240px;
  --container-narrow:  820px;
  --container-text:    720px;   /* long-form reading */
  --page-gutter:       32px;

  /* ---------- LETTER SPACING ---------- */
  --ls-display:  2px;      /* Bebas caps */
  --ls-overline: 2.5px;    /* overlines */
  --ls-uppercase: 2px;     /* uppercase labels */
  --ls-tight:   -1.5px;    /* hero headlines */
}

/* =====================================================
   SEMANTIC ELEMENT DEFAULTS
   Use directly, or compose with classes below.
   ===================================================== */

body {
  background: var(--bg-warm);
  color: var(--text-dark);
  font: var(--text-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--text-h1);      color: var(--text-dark); margin: 0; }
h2 { font: var(--text-section); color: var(--text-dark); margin: 0; letter-spacing: -0.5px; }
h3 { font: var(--text-h3);      color: var(--text-dark); margin: 0; }
h4 { font: var(--text-overline); color: var(--text-muted); letter-spacing: var(--ls-overline); text-transform: uppercase; margin: 0; }

em  { font-style: italic; color: var(--accent); }

p { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px;
    text-decoration-color: rgba(200, 121, 42, 0.3); transition: color var(--dur-fast) ease; }
a:hover { color: var(--accent-dark); text-decoration-color: var(--accent); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

blockquote {
  font: var(--text-quote);
  color: var(--text-dark);
  border-left: 3px solid var(--accent);
  padding: var(--space-10) 0 var(--space-10) var(--space-10);
  margin: 0;
  max-width: 720px;
}
blockquote::before { content: '«'; color: var(--accent); margin-right: 4px; }
blockquote::after  { content: '»'; color: var(--accent); margin-left: 4px; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

/* ---------- UTILITY CLASSES ---------- */
.overline {
  font: var(--text-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent);
}
.section-title {
  font: var(--text-section);
  letter-spacing: -0.5px;
  color: var(--text-dark);
}
.muted { color: var(--text-muted); }
.display-caps {
  font: var(--text-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}