/* ============================================================================
   СТАТУС — Design System · Foundations
   colors_and_type.css
   Source of truth: MASTER-CONTEXT-STATUS-VISUAL-2026-06-02-v1.0 (§4)
   ----------------------------------------------------------------------------
   Fonts (CONFIRMED by Irina, 2026-06, rev.2):
     · Display + Body  → Golos Text  (one warm, human, premium Cyrillic face throughout)
     Headings and body share Golos Text for a cohesive, warm feel. Tabular figures kept.
   The brand green (--green-600 #44730D) is CONFIRMED canonical. Re-skin by editing it here.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---- Brand greens (base — from the logo) ------------------------------ */
  --green-600: #44730D;   /* primary — buttons, accents, brand */
  --green-700: #365C0A;   /* hover / pressed, dark plates */
  --green-800: #284408;   /* deep plate background */
  --green-100: #EAF1DD;   /* soft fills, selections */
  --green-50:  #F5F8EF;   /* very light section background */

  /* ---- Ink (text) ------------------------------------------------------- */
  --ink-900: #1F1F1F;     /* primary text, owl, wordmark */
  --ink-700: #2A2F36;     /* secondary text */
  --ink-500: #5B6470;     /* captions, placeholders */

  /* ---- Warm / heritage + surfaces -------------------------------------- */
  --cream-100: #FFFBDB;   /* heritage accent, warm fills */
  --surface:   #FFFFFF;   /* primary surface */
  --bg:        #FBFCFA;   /* app canvas (greenish-neutral) */
  --border:    #E6E8E2;   /* dividers, field borders */
  --border-strong: #D2D6CC;

  /* ---- Semantic statuses (deliberately calm — premium over "traffic light") */
  --status-ok:      #3C8A2E;   /* paid / filed / on time */
  --status-warn:    #C9890A;   /* due soon / partial / attention */
  --status-danger:  #B23A2E;   /* overdue / debt / not filed */
  --status-info:    #2E6FB2;   /* informational / neutral */
  --status-credit:  #1F8A7A;   /* overpayment */

  /* tints for status surfaces (12% over white, hand-tuned) */
  --status-ok-bg:     #E7F1E3;
  --status-warn-bg:   #F8EED5;
  --status-danger-bg: #F3E0DD;
  --status-info-bg:   #E1ECF6;
  --status-credit-bg: #DCF0EC;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: 'Golos Text', system-ui, sans-serif;
  --font-body:    'Golos Text', system-ui, sans-serif;
  --font-mono:    'Golos Text', ui-monospace, monospace; /* used with tabular figures */

  /* type scale (px) — 12 / 14 / 16(base) / 20 / 24 / 32 / 40 / 56 */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  --lh-tight: 1.2;   /* headings */
  --lh-body:  1.5;   /* text */

  /* ---- Spacing scale — base rhythm 8px ---------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-field: 4px;
  --r-card:  8px;
  --r-modal: 12px;
  --r-pill:  999px;

  /* ---- Elevation — very restrained, multi-layer soft (never "puffy") ---- */
  --shadow-1: 0 1px 2px rgba(31,31,31,.04), 0 1px 1px rgba(31,31,31,.03);
  --shadow-2: 0 1px 2px rgba(31,31,31,.04), 0 4px 12px rgba(31,31,31,.05);
  --shadow-3: 0 2px 4px rgba(31,31,31,.05), 0 12px 28px rgba(31,31,31,.08);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: 24px;

  /* ---- Motion — restrained, ease-out, 150–250ms ------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
}

/* ============================================================================
   Semantic element styles — apply on top of the tokens above.
   Import this file and these classes carry the brand without re-deciding.
   ============================================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  margin: 0;
}

h1, .h1 { font-size: var(--fs-56); font-weight: 800; letter-spacing: -0.015em; }
h2, .h2 { font-size: var(--fs-40); font-weight: 700; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-24); font-weight: 700; }
.h4     { font-size: var(--fs-20); font-weight: 600; font-family: var(--font-display); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-600);
}

p, .body { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-700); }
.lead    { font-size: var(--fs-20); line-height: 1.45; color: var(--ink-700); }
.caption { font-size: var(--fs-14); color: var(--ink-500); }
.micro   { font-size: var(--fs-12); color: var(--ink-500); }

/* Tabular figures — MANDATORY for sums, ИНН, dates so columns align (§4.2). */
.tnum, .amount, .inn, .figure {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.amount { text-align: right; white-space: nowrap; }

/* Heritage decorative hairline (art-deco divider — green, thin, sparing) */
.deco-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-600) 18%, var(--green-600) 82%, transparent);
  opacity: .55;
}