/* ============================================
   «Звонки CRM» · Графит — цвета и типографика
   Значения совпадают с макетом (design/zvonki-crm/gen_final.py) и с приложением
   (android/app/src/zvonki/.../theme/Theme.kt). Имена переменных оставлены прежними,
   чтобы app.css и JS работали без правок; меняются только значения.
   ============================================ */

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

:root {
  /* ---------- Brand colors (Графит) ---------- */
  /* Прежние имена оставлены совместимыми: navy — графитовые чернила, lime — зелёный акцент,
     slate — тёплые серые, cream — бумага. */
  --zamon-navy:   #1C1B19;
  --zamon-lime:   #1F8A70;
  --zamon-cream:  #F6F5F2;
  --zamon-slate:  #5E5B55;

  --navy-900: #141312;
  --navy-800: #1C1B19;       /* чернила, тёмное меню */
  --navy-700: #2B2A27;
  --navy-600: #3A3935;
  --navy-500: #4A4843;
  --navy-400: #6B6862;

  --lime-700: #155E4C;
  --lime-600: #18705B;
  --lime-500: #1F8A70;       /* акцент */
  --lime-400: #3DBE9A;
  --lime-300: #BFE6D8;
  --lime-100: #E3F2EC;

  --slate-900: #2A2926;
  --slate-700: #44423D;
  --slate-600: #5E5B55;
  --slate-500: #8C8880;
  --slate-400: #A8A49C;
  --slate-300: #D5D2CC;
  --slate-200: #E6E3DD;
  --slate-100: #EEEDEA;

  --cream-50:  #FFFFFF;
  --cream-100: #F6F5F2;      /* бумага */
  --cream-200: #EDEBE6;

  /* ---------- Semantic ---------- */
  --bg:          #F6F5F2;
  --bg-elevated: #FFFFFF;
  --bg-inverse:  #1C1B19;

  --fg:          #1C1B19;
  --fg-muted:    #5E5B55;
  --fg-subtle:   #8C8880;
  --fg-inverse:  #EDEBE6;

  --border:      #E6E3DD;
  --border-strong: #D5D2CC;

  --accent:      #1F8A70;
  --accent-hover: #18705B;
  --accent-fg:   #FFFFFF;     /* текст на зелёном */

  --success:     #1F8A70;
  --warning:     #9A6700;
  --danger:      #B3261E;
  --info:        #5E5B55;

  /* ---------- Type ---------- */
  --font-sans: 'Golos Text', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Weights — Montserrat */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Sizes (rem, 1rem = 16px) */
  --t-display-1: 4.5rem;   /* 72 */
  --t-display-2: 3.5rem;   /* 56 */
  --t-h1: 2.5rem;          /* 40 */
  --t-h2: 2rem;            /* 32 */
  --t-h3: 1.5rem;          /* 24 */
  --t-h4: 1.25rem;         /* 20 */
  --t-h5: 1.125rem;        /* 18 */
  --t-body: 1rem;          /* 16 */
  --t-small: 0.875rem;     /* 14 */
  --t-caption: 0.75rem;    /* 12 */
  --t-eyebrow: 0.6875rem;  /* 11 */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  /* Letter-spacing — geometric sans wants generous tracking on caps */
  --ls-eyebrow: 0.08em;    /* ALL-CAPS eyebrows / pill labels */
  --ls-display: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  /* ---------- Spacing ---------- */
  --space-0:  0;
  --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;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(28,27,25,0.04);
  --shadow-sm: 0 2px 6px rgba(28,27,25,0.06), 0 1px 2px rgba(28,27,25,0.04);
  --shadow-md: 0 6px 16px rgba(28,27,25,0.08), 0 2px 4px rgba(28,27,25,0.04);
  --shadow-lg: 0 20px 40px rgba(28,27,25,0.12), 0 4px 12px rgba(28,27,25,0.06);
  --shadow-focus: 0 0 0 4px rgba(31,138,112,0.22);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ============================================
   Semantic typography classes
   ============================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, .display-2, h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
}

.display-1 {
  font-size: var(--t-display-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.display-2 {
  font-size: var(--t-display-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
h1, .h1 { font-size: var(--t-h1); font-weight: var(--fw-bold);    line-height: var(--lh-snug); letter-spacing: var(--ls-display); }
h2, .h2 { font-size: var(--t-h2); font-weight: var(--fw-bold);    line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--t-h3); font-weight: var(--fw-semibold);line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--t-h4); font-weight: var(--fw-semibold);line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--t-h5); font-weight: var(--fw-semibold);line-height: var(--lh-normal); }

p, .body { font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--fg); margin: 0; }
.small   { font-size: var(--t-small); line-height: var(--lh-relaxed); color: var(--fg-muted); }
.caption { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-subtle); }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mono { font-family: var(--font-mono); }