/* ══════════════════════════════════════════════════════════════
   Pleada · Внедрение ИИ в бизнес — V2 design tokens
   Black & white base + dual accent (Red primary · Green secondary)
   ══════════════════════════════════════════════════════════════ */

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

:root {
  /* ═══ Brand · Red (primary accent — terracotta, warm) ═══ */
  --red:            #C5443A;   /* Terracotta — тёплый, AA на белом (4.6:1) */
  --red-hover:      #D45448;   /* Чуть ярче для hover */
  --red-deep:       #8E2A22;   /* Pressed / для текста на крем-фоне (7.2:1) */
  --red-tint:       #FCEBE7;   /* "Current" pill BG, песочно-розовый */
  --red-tint-2:     #FFF6F3;   /* Hover BG, soft surface */
  --red-bd:         #F2C9C2;   /* Тонкая рамка для tint-карточек */
  --red-dot-rule:   radial-gradient(circle, #C5443A 1px, transparent 1.4px) center / 10px 2px repeat-x;

  /* ═══ Brand · Green (secondary accent — done, success, life) ═══ */
  --green:          #1F4434;   /* Бутылочный, хвойный */
  --green-hover:    #2A5A45;
  --green-deep:     #133024;
  --green-tint:     #E8F1EC;   /* "Done" pill BG */
  --green-tint-2:   #F4F8F5;
  --green-bd:       #BFD6C8;

  /* ═══ Surfaces ═══ */
  --paper:          #FFFFFF;   /* Default page BG (v2 — чище чем v1) */
  --paper-2:        #FAFAFA;   /* Soft alt */
  --app-bg:         #F5F5F4;   /* ЛК / cabinet */
  --surface:        #FFFFFF;
  --surface-sunken: #FAFAF8;
  --ink:            #1A1614;   /* Warm charcoal — тёплый, не «дыра» */
  --ink-hover:      #2A2622;   /* Тёплый hover для btn-ink (v2-token, 27.04.2026) */

  /* ═══ Neutrals ═══ */
  --border:         #E4E4E7;   /* Default card border (DELTA: cooler) */
  --border-2:       #E5E7EB;   /* Field border */
  --divider:        #D4D4D8;
  --muted:          #767676;   /* WCAG AA on white (4.54:1) — было #A1A1AA = 2.85:1 fail (fixed 27.04.2026) */
  --muted-decor:    #A1A1AA;   /* Только для декоративных элементов с aria-hidden или ≥18px */
  --secondary:      #52525B;   /* DELTA-fixed: cooler than v1 */
  --body:           #3F3F46;
  --warm-hover:     #F4F4F5;

  /* ═══ Semantic ═══ */
  --success:        var(--green);
  --success-bg:     var(--green-tint);
  --success-bd:     var(--green-bd);
  --warning-fg:     #92400E;
  --warning-bg:     #FEF3C7;
  --warning-bd:     #FDE68A;
  --danger:         var(--red);
  --danger-bg:      var(--red-tint);
  --danger-bd:      var(--red-bd);
  --telegram:       #229ED9;

  /* ═══ Fonts ═══ */
  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --font-body:    'Onest', system-ui, sans-serif;
  --font-numeric: 'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Inter удалён из fallback-chain 27.04.2026 — Onest полностью покрывает body, экономия 780KB */

  /* ═══ Type scale (v2 — wider hierarchy, editorial display) ═══ */
  --fs-display: clamp(56px, 8vw, 96px);   /* hero / poster */
  --fs-h1:      clamp(40px, 5vw, 64px);   /* page title */
  --fs-h2:      clamp(28px, 3vw, 36px);   /* section */
  --fs-h3:      20px;                      /* sub-section */
  --fs-lede:    19px;                      /* large body / intro */
  --fs-body:    16px;                      /* body */
  --fs-small:   14px;                      /* secondary body */
  --fs-mono:    12px;                      /* tech caption / kicker */

  /* ═══ Container ═══ */
  --container:     1280px;
  --container-pad: 24px;

  /* ═══ Radii ═══ */
  --radius-sm:  8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl:16px;
  --radius-full:9999px;

  /* ═══ Shadows ═══ */
  --shadow-card:    0 20px 40px -24px rgba(0,0,0,.18);
  --shadow-red:     0 10px 24px -12px rgba(197,68,58,.40);
  --shadow-popular: 0 30px 70px -40px rgba(197,68,58,.50);
  --shadow-black:   0 10px 24px -10px rgba(0,0,0,.35);

  /* ═══ Focus ═══ */
  --focus-ring:     0 0 0 4px rgba(26,22,20,.08);
  --focus-ring-red: 0 0 0 4px rgba(197,68,58,.22);

  /* ═══ Brand patterns (v2-token, 27.04.2026 — заменяет 8 hardcoded rgba в index.html) ═══ */
  --dot-pattern-red: radial-gradient(circle, rgba(197,68,58,.5) 1px, transparent 1px);
}

/* ══════════════════════════════════════════════════════════════
   Global focus-visible (WCAG 2.1 AA · keyboard navigation, 27.04.2026)
   ══════════════════════════════════════════════════════════════ */
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-red);
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(197,68,58,.55);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(197,68,58,.45);
  border-color: var(--red);
}

/* Skip-link для screen reader / keyboard nav (WCAG 2.4.1) */
.skip-link {
  position: absolute; left: -9999px; top: -9999px;
  padding: 12px 20px; background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  border-radius: 0 0 var(--radius-md) 0; z-index: 1000;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0; top: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ══════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ══════════════════════════════════════════════════════════════
   Typography utilities (semantic) — v2
   Bricolage Grotesque: 200 (extralight) для крупных заголовков,
   600 (semibold) для UI, без 800-блочности.
   ══════════════════════════════════════════════════════════════ */
.t-display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: .96; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; }
.t-h1      { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1);      line-height: 1.02; letter-spacing: -0.035em; font-variation-settings: "opsz" 64; }
.t-h2      { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);      line-height: 1.1;  letter-spacing: -0.025em; font-variation-settings: "opsz" 36; }
.t-h3      { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);      line-height: 1.25; letter-spacing: -0.015em; font-variation-settings: "opsz" 20; }
.t-lede    { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-lede);    line-height: 1.5;  color: var(--body); letter-spacing: -0.005em; }
.t-body    { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-body);    line-height: 1.55; color: var(--body); }
.t-small   { font-family: var(--font-body);    font-weight: 400; font-size: var(--fs-small);   line-height: 1.5;  color: var(--body); }
.t-kicker  { font-family: var(--font-mono);    font-weight: 500; font-size: var(--fs-mono);    line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secondary); }
.t-mono    { font-family: var(--font-mono);    font-weight: 500; font-size: 13px; line-height: 1.45; }
.t-stat    { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 6vw, 72px); line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 72; }
.t-price   { font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 7vw, 88px); line-height: .9;  letter-spacing: -0.045em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 88; }

/* ═ Brand period punch (ends headings) — small square dot, blinks "8933" in Morse ═
   Strategy: background paints the visible square, sized via padding-trick.
   Dot sits at the BOTTOM of the line (text-bottom), not on baseline — so optically
   it reads as a real period at the very bottom of the row, regardless of font size.
   Sizing is em-based so it scales with the heading. */
/* .dot-red / .dot-green в конце заголовков — отключены. Мерцание Морзе «8933» переехало в .sec-kicker .dot (см. ниже). */
.dot-red,
.dot-green { display: none; }
.dot-red   { background: var(--red); }
.dot-green { background: var(--green); }
@keyframes morse-8933 {
  0.000% { opacity: 0; } 0.001% { opacity: 1; }
  3.226% { opacity: 1; } 3.227% { opacity: 0; }
  4.301% { opacity: 0; } 4.302% { opacity: 1; }
  7.527% { opacity: 1; } 7.528% { opacity: 0; }
  8.602% { opacity: 0; } 8.603% { opacity: 1; }
  11.828% { opacity: 1; } 11.829% { opacity: 0; }
  12.903% { opacity: 0; } 12.904% { opacity: 1; }
  13.978% { opacity: 1; } 13.979% { opacity: 0; }
  15.054% { opacity: 0; } 15.055% { opacity: 1; }
  16.129% { opacity: 1; } 16.130% { opacity: 0; }
  23.656% { opacity: 0; } 23.657% { opacity: 1; }
  26.882% { opacity: 1; } 26.883% { opacity: 0; }
  27.957% { opacity: 0; } 27.958% { opacity: 1; }
  31.183% { opacity: 1; } 31.184% { opacity: 0; }
  32.258% { opacity: 0; } 32.259% { opacity: 1; }
  35.484% { opacity: 1; } 35.485% { opacity: 0; }
  36.559% { opacity: 0; } 36.560% { opacity: 1; }
  39.785% { opacity: 1; } 39.786% { opacity: 0; }
  40.860% { opacity: 0; } 40.861% { opacity: 1; }
  41.935% { opacity: 1; } 41.936% { opacity: 0; }
  49.462% { opacity: 0; } 49.463% { opacity: 1; }
  50.538% { opacity: 1; } 50.539% { opacity: 0; }
  51.613% { opacity: 0; } 51.614% { opacity: 1; }
  52.688% { opacity: 1; } 52.689% { opacity: 0; }
  53.763% { opacity: 0; } 53.764% { opacity: 1; }
  54.839% { opacity: 1; } 54.840% { opacity: 0; }
  55.914% { opacity: 0; } 55.915% { opacity: 1; }
  59.140% { opacity: 1; } 59.141% { opacity: 0; }
  60.215% { opacity: 0; } 60.216% { opacity: 1; }
  63.441% { opacity: 1; } 63.442% { opacity: 0; }
  70.968% { opacity: 0; } 70.969% { opacity: 1; }
  72.043% { opacity: 1; } 72.044% { opacity: 0; }
  73.118% { opacity: 0; } 73.119% { opacity: 1; }
  74.194% { opacity: 1; } 74.195% { opacity: 0; }
  75.269% { opacity: 0; } 75.270% { opacity: 1; }
  76.344% { opacity: 1; } 76.345% { opacity: 0; }
  77.419% { opacity: 0; } 77.420% { opacity: 1; }
  80.645% { opacity: 1; } 80.646% { opacity: 0; }
  81.720% { opacity: 0; } 81.721% { opacity: 1; }
  84.946% { opacity: 1; } 84.947% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dot-red::after, .dot-green::after { animation: none; opacity: 1; }
}

/* ═ Red dotted divider (the signature horizontal rule) ═ */
.red-dotted { height: 2px; background: var(--red-dot-rule); }

/* ═ Red marker — hand-drawn underline / swoosh under a word ═ */
.red-mark  { background: linear-gradient(transparent 62%, rgba(160,27,27,.18) 62%); padding: 0 .08em; }
.red-under { box-shadow: inset 0 -3px 0 0 var(--red); }

/* ══════════════════════════════════════════════════════════════
   Card primitives
   ══════════════════════════════════════════════════════════════ */
.card         { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); }
.card-sunken  { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.card-active  { border: 1px solid var(--ink); box-shadow: inset 3px 0 0 0 var(--red); }
.card-night   { background: var(--ink); color: #fff; border-radius: var(--radius-2xl); position: relative; overflow: hidden; }
.card-night::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(197,68,58,.5) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .07;
  pointer-events: none;
}