/* ============================================================
   SEO CRM — Design Tokens
   Import on every page:  <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

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

:root {
  /* ---------- COLORS · NEUTRALS ---------- */
  --ink:        #1A1A1F;   /* primary text */
  --ink-2:      #2D2D33;
  --gray-1:     #6B7280;   /* secondary text */
  --gray-2:     #9099A3;   /* tertiary text, placeholders */
  --gray-3:     #C5CAD2;   /* dividers visible */
  --line:       #E5E7EC;   /* hairlines, card borders */
  --line-2:     #EEF0F3;   /* lighter hairlines */
  --well:       #F5F6FA;   /* inner well / metric card bg */
  --well-2:     #F0F1F5;   /* slightly darker well */
  --page:       #ECEEF2;   /* page background */
  --white:      #FFFFFF;   /* primary card bg */

  /* ---------- COLORS · BRAND ---------- */
  --violet:        #5B3DEB;   /* PRIMARY brand — active states, primary CTA */
  --violet-600:    #4E33D6;   /* hover */
  --violet-700:    #3F28B5;   /* press */
  --violet-soft:   #EEEAFF;   /* badge pill bg, light surfaces */
  --violet-soft-2: #DCD4FF;   /* badge pill bg, stronger */
  --violet-grad-a: #5840E0;   /* gradient start */
  --violet-grad-b: #7E63F0;   /* gradient end */

  /* ---------- COLORS · ACCENT ---------- */
  --orange:       #E88B2E;   /* warm CTA accent — "Подключить →" */
  --orange-600:   #D67822;
  --orange-soft:  #FCE9D2;

  --green:        #5BBC6E;   /* success — "Активен", high scores */
  --green-600:    #46A659;
  --green-soft:   #E5F4E8;

  --red:          #D93B3B;   /* critical / error */
  --red-soft:     #FBE5E5;

  --amber:        #E5A93D;   /* warning */
  --amber-soft:   #FBEFD4;

  /* ---------- SEMANTIC ---------- */
  --fg1: var(--ink);
  --fg2: var(--gray-1);
  --fg3: var(--gray-2);
  --bg1: var(--white);
  --bg2: var(--well);
  --bg3: var(--page);

  /* ---------- TYPE FAMILIES ----------
     Inter has excellent Cyrillic coverage — used product-wide.
     JetBrains Mono for numbers/code/IDs in dense surfaces. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SIZES (px) ---------- */
  --t-display-xl: 56px;   /* marketing hero */
  --t-display-l:  44px;
  --t-display-m:  32px;
  --t-h1:         28px;   /* page titles */
  --t-h2:         22px;   /* card titles, site name */
  --t-h3:         18px;   /* section labels w/ emoji */
  --t-h4:         16px;
  --t-body:       14px;
  --t-body-sm:    13px;
  --t-tiny:       12px;
  --t-label:      11px;   /* uppercase eyebrows */
  --t-metric:     32px;   /* big numbers in metric cards */
  --t-metric-lg:  44px;   /* hero metric */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.5;
  --lh-tight:   1.25;

  /* ---------- WEIGHTS ---------- */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ---------- TRACKING ---------- */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.06em;   /* uppercase labels */
  --tr-widest:  0.12em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 80px;
  --s-11: 120px;

  /* ---------- RADII ---------- */
  --r-xs: 6px;     /* small chips */
  --r-sm: 10px;    /* buttons, inputs, inner wells */
  --r-md: 14px;    /* mid cards */
  --r-lg: 20px;    /* large surface cards */
  --r-xl: 24px;    /* hero / banner cards */
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bd:        1px solid var(--line);
  --bd-soft:   1px solid var(--line-2);
  --bd-strong: 1px solid var(--gray-3);

  /* ---------- ACCENT STRIPE (left-edge on metric cards) ---------- */
  --stripe-w: 3px;

  /* ---------- SHADOWS — very restrained ---------- */
  --shadow-xs: 0 1px 2px rgba(26,26,31,0.04);
  --shadow-sm: 0 2px 8px rgba(26,26,31,0.05);
  --shadow-md: 0 8px 24px -8px rgba(26,26,31,0.10);
  --shadow-lg: 0 20px 48px -16px rgba(26,26,31,0.18);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 280ms;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--w-semibold); }
h4 { font-size: var(--t-h4); font-weight: var(--w-semibold); }

p { margin: 0; text-wrap: pretty; }

/* Display utility */
.display-xl { font-size: var(--t-display-xl); line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: var(--w-bold); }
.display-l  { font-size: var(--t-display-l);  line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: var(--w-bold); }
.display-m  { font-size: var(--t-display-m);  line-height: var(--lh-display); letter-spacing: var(--tr-tight); font-weight: var(--w-bold); }

/* Eyebrow / uppercase label */
.eyebrow, .label-cap {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--gray-1);
}

/* Mono — numbers, IDs, code */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--violet); }

::selection { background: var(--violet-soft-2); color: var(--ink); }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ============================================================
   SHARED PRIMITIVES used across preview cards + UI kits
   ============================================================ */

/* — BUTTONS — */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-size: var(--t-body);
  font-weight: var(--w-semibold); letter-spacing: -0.005em;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--violet); color: var(--white);
  border: 0; cursor: pointer;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover  { background: var(--violet-600); }
.btn:active { transform: scale(0.98); background: var(--violet-700); }

.btn--ghost {
  background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: var(--well); box-shadow: inset 0 0 0 1px var(--gray-3); }

.btn--orange {
  background: transparent; color: var(--orange); padding: 0;
  font-weight: var(--w-semibold); border-radius: 0;
}
.btn--orange:hover { color: var(--orange-600); background: transparent; transform: none; }

.btn--sm { padding: 6px 14px; font-size: var(--t-body-sm); }

/* — TAGS / PILLS — */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--t-label); font-weight: var(--w-semibold);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--well); color: var(--gray-1);
}
.tag--violet { background: var(--violet-soft); color: var(--violet); }
.tag--green  { background: var(--green-soft);  color: var(--green-600); }
.tag--orange { background: var(--orange-soft); color: var(--orange-600); }
.tag--red    { background: var(--red-soft);    color: var(--red); }

/* status pill with dot */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--t-tiny); font-weight: var(--w-semibold);
  background: var(--green-soft); color: var(--green-600);
}
.status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-600);
}

/* — NUMBER BADGE next to nav items — */
.count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--violet-soft); color: var(--violet);
  font-size: var(--t-tiny); font-weight: var(--w-semibold);
}

/* — CARDS — */
.card {
  background: var(--white); border-radius: var(--r-lg); padding: var(--s-6);
}
.card--bordered { border: var(--bd); }
.card--shadow   { box-shadow: var(--shadow-xs); }

/* well = inner gray surface, used in metric & action items */
.well {
  background: var(--well); border-radius: var(--r-sm); padding: var(--s-5);
}

/* metric card: gray well with colored left stripe */
.metric {
  position: relative;
  background: var(--well); border-radius: var(--r-sm);
  padding: 16px 18px 14px 22px;
  overflow: hidden;
}
.metric::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: var(--stripe-w); background: var(--violet); border-radius: 2px;
}
.metric--green::before  { background: var(--green); }
.metric--orange::before { background: var(--orange); }
.metric--gray::before   { background: var(--gray-3); }
.metric--red::before    { background: var(--red); }

.metric__label {
  font-size: var(--t-label); font-weight: var(--w-semibold);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--gray-1);
}
.metric__value {
  font-family: var(--font-sans);
  font-size: var(--t-metric); font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight); line-height: 1.1;
  margin-top: 6px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metric__value--violet { color: var(--violet); }
.metric__value--green  { color: var(--green-600); }
.metric__value--orange { color: var(--orange); }
.metric__sub {
  font-size: var(--t-tiny); color: var(--gray-2); margin-top: 4px;
}

/* — INPUTS — */
.input {
  font-family: var(--font-sans); font-size: var(--t-body);
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
  width: 100%;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--gray-2); }
.input:hover { border-color: var(--gray-3); }
.input:focus {
  outline: 0; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(91,61,235,0.15);
}

/* — TABS — */
.tab-bar { display: flex; gap: var(--s-7); border-bottom: var(--bd); }
.tab {
  position: relative; padding: 12px 0; cursor: pointer;
  font-weight: var(--w-medium); color: var(--gray-1);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--dur-1) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"], .tab.is-active {
  color: var(--violet); font-weight: var(--w-semibold);
}
.tab[aria-current="page"]::after, .tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--violet); border-radius: 2px 2px 0 0;
}

/* — PILL TAB (filter pills, e.g. Главное / Трафик) — */
.pill-tabs { display: inline-flex; gap: var(--s-2); align-items: center; }
.pill {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--violet-soft); color: var(--violet);
  font-weight: var(--w-semibold); font-size: var(--t-body-sm);
  cursor: pointer; border: 0;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.pill:hover { background: var(--violet-soft-2); }
.pill.is-active {
  background: var(--violet); color: var(--white);
}

/* — DIVIDER — */
.divider { height: 1px; background: var(--line); border: 0; margin: var(--s-5) 0; }

/* — UTILITY — */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.between { justify-content: space-between; }
.muted { color: var(--gray-1); }
.muted-2 { color: var(--gray-2); }
.center { display: flex; align-items: center; justify-content: center; }