/* ============================================================
   Scorix · Helios Design System
   Production-ready tokens · v0.1 · 2026-05
   ------------------------------------------------------------
   Single source of truth: drop into app/static/tokens.css (or
   src/styles/tokens.css) and link BEFORE any other stylesheet.
   ============================================================ */

:root {
  /* ----- COLOR · neutrals ----------------------------------- */
  --color-bg:           #FAFAF7;  /* page background · default canvas */
  --color-bg-deep:      #F2F2EE;  /* wells, secondary bg, chart tracks */
  --color-surface:      #FFFFFF;  /* cards, modals, panels */
  --color-ink:          #0A0A0A;  /* primary text & strong surfaces */
  --color-ink-soft:     #1F1F1F;  /* body emphasis */
  --color-muted:        #5C5C5C;  /* secondary text, meta — 6.39:1 on bg (WCAG AA) */
  --color-faint:        #6E6E6E;  /* tertiary, disabled — 4.88:1 on bg (WCAG AA; was #9A9A9A = 2.69, failed) */
  --color-line:         rgba(10, 10, 10, 0.08);
  --color-line-strong:  rgba(10, 10, 10, 0.18);
  --color-line-dark:    rgba(255, 255, 255, 0.12);

  /* ----- COLOR · brand · ember ----------------------------- */
  --color-ember:        #FF4A1F;  /* primary brand · CTA · hot tier */
  --color-ember-deep:   #D43A12;  /* hover, pressed, text on tinted */
  --color-ember-soft:   #FFE9E1;  /* tinted backgrounds */
  --color-ember-ink:    #0A0A0A;  /* text on ember surfaces */

  /* ----- COLOR · semantic ---------------------------------- */
  --color-pos:          #0E7C3A;  /* verified · success · positive */
  --color-pos-soft:     #E1F1E7;
  --color-cool:         #1B6BFF;  /* info · monitored · neutral data */
  --color-cool-soft:    #E1ECFF;
  --color-warn:         #C0871A;  /* attention · warm tier · pending */
  --color-warn-soft:    #F8EFD8;
  --color-neg:          #B0271A;  /* destructive · errors · suppress */
  --color-neg-soft:     #F5DDD8;

  /* ----- COLOR · signal tiers (semantic alias) ------------- */
  --signal-hot:         var(--color-ember);   /* score ≥ 85 */
  --signal-warm:        var(--color-warn);    /* score 70 – 84 */
  --signal-cold:        var(--color-muted);   /* score < 70 */
  --signal-suppressed:  var(--color-neg);

  /* ----- TYPOGRAPHY ---------------------------------------- */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Scale */
  --fs-display:  124px;  --lh-display: 0.92;  --ls-display: -0.045em;
  --fs-h1:        44px;  --lh-h1:      1.05;  --ls-h1:      -0.025em;
  --fs-h2:        28px;  --lh-h2:      1.15;  --ls-h2:      -0.015em;
  --fs-h3:        20px;  --lh-h3:      1.25;  --ls-h3:      -0.01em;
  --fs-body:      15px;  --lh-body:    1.55;
  --fs-small:     13px;  --lh-small:   1.5;
  --fs-meta:      12px;  --lh-meta:    1.45;
  --fs-eyebrow:   11px;  --ls-eyebrow:  0.10em;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semi:      600;
  --fw-bold:      700;

  /* ----- SPACING · 4-point base ---------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;

  /* ----- RADII --------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-pill: 999px;

  /* ----- ELEVATION ----------------------------------------- */
  --shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-2: 0 1px 2px rgba(10, 10, 10, 0.04), 0 6px 16px -4px rgba(10, 10, 10, 0.08);
  --shadow-3: 0 20px 60px -10px rgba(10, 10, 10, 0.18);
  --ring-accent: 0 0 0 3px rgba(255, 74, 31, 0.16);

  /* ----- LAYOUT -------------------------------------------- */
  --container-max:    1280px;
  --container-gutter: 40px;

  /* ----- MOTION -------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  280ms;
  --dur-slow: 1200ms;
  --dur-counter: 1600ms;
  --dur-draw:    1800ms;

  /* ----- Z-INDEX ------------------------------------------- */
  --z-content: 1;
  --z-sticky:  10;
  --z-appbar:  20;
  --z-overlay: 30;
  --z-toast:   50;
}

/* ============================================================
   BASE
   ============================================================ */

html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

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

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

/* Utility · tabular numerics */
.num,
[data-num] {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Utility · eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--color-muted);
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

/* --- Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 16px;
  font: var(--fw-semi) var(--fs-small)/1 var(--font-sans);
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 7px 12px; font-size: var(--fs-meta); border-radius: var(--radius-xs); }
.btn--lg { padding: 15px 20px; font-size: 14px; border-radius: var(--radius-md); }

.btn--primary   { background: var(--color-ink);     color: var(--color-bg); }
.btn--secondary { background: var(--color-ember);   color: var(--color-ember-ink); }
.btn--secondary:hover { background: var(--color-ember-deep); }
.btn--outline   { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-ink); }
.btn--soft      { background: var(--color-bg-deep); color: var(--color-ink); }
.btn--ghost     { background: transparent; color: var(--color-ink); }
.btn--danger    { background: transparent; color: var(--color-neg); border: 1.5px solid var(--color-neg); }

/* Button icon hat — a circle that contains an arrow */
.btn__hat {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-ember);
  color: var(--color-ink);
  font-size: 10px;
}
.btn--secondary .btn__hat { background: var(--color-ink); color: var(--color-ember-ink); }

/* --- Card --- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.card--raised { box-shadow: var(--shadow-2); }
.card--float  { box-shadow: var(--shadow-3); }
.card--ink    { background: var(--color-ink); color: var(--color-bg); border-color: transparent; }

/* --- Badge --- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--fw-semi) var(--fs-eyebrow)/1 var(--font-sans);
  padding: 4px 9px;
  border-radius: var(--radius-xs) + 2px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-deep);
  color: var(--color-ink);
  letter-spacing: 0.02em;
}
.badge--ember { background: var(--color-ember-soft); color: var(--color-ember-deep); border-color: #FFC7B5; }
.badge--pos   { background: var(--color-pos-soft);   color: var(--color-pos);        border-color: #B8DCC3; }
.badge--cool  { background: var(--color-cool-soft);  color: var(--color-cool);       border-color: #BCD1FF; }
.badge--warn  { background: var(--color-warn-soft);  color: var(--color-warn);       border-color: #E6D4A6; }
.badge--neg   { background: var(--color-neg-soft);   color: var(--color-neg);        border-color: #E6B4AB; }
.badge--ink   { background: var(--color-ink);        color: var(--color-bg);         border-color: var(--color-ink); }
.badge__dot   { width: 5px; height: 5px; border-radius: var(--radius-pill); background: currentColor; }

/* --- Input --- */
.input {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font: var(--fw-regular) var(--fs-body) var(--font-sans);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus-within {
  border-color: var(--color-ember);
  box-shadow: var(--ring-accent);
}
.input--error {
  background: var(--color-neg-soft);
  border-color: var(--color-neg);
}

/* --- Switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 36px; height: 20px;
  background: var(--color-bg-deep);
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.switch__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  transition: left var(--dur-base) var(--ease-out);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.switch[aria-checked="true"]                  { background: var(--color-ember); }
.switch[aria-checked="true"] .switch__knob    { left: 18px; }

/* --- Segmented control --- */
.seg {
  display: inline-flex;
  background: var(--color-bg-deep);
  border-radius: var(--radius-md);
  padding: 3px;
}
.seg__item {
  padding: 6px 14px;
  font: var(--fw-semi) var(--fs-small)/1 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--color-ink);
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.seg__item[aria-selected="true"] {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* ============================================================
   COMPOSITES
   ============================================================ */

/* --- KPI tile --- */
.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.kpi__label { /* compose with .eyebrow */ }
.kpi__value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 36px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 6px;
}
.kpi__delta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  margin-top: 2px;
}

/* --- Progress bar / score bar --- */
.bar {
  height: 6px;
  background: var(--color-bg-deep);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
}
.bar__fill {
  position: absolute; inset: 0;
  width: 0%;
  background: var(--color-ember);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slow) var(--ease-out);
}
.bar--hot  .bar__fill { background: var(--signal-hot); }
.bar--warm .bar__fill { background: var(--signal-warm); }
.bar--cold .bar__fill { background: var(--signal-cold); }

/* --- Signal score pill (e.g. "92 hot") --- */
.score-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-xs) + 2px;
}
.score-pill--hot  { background: rgba(255, 74, 31, 0.10); border: 1px solid rgba(255, 74, 31, 0.27); color: var(--color-ember); }
.score-pill--warm { background: rgba(192, 135, 26, 0.10); border: 1px solid rgba(192, 135, 26, 0.27); color: var(--color-warn); }
.score-pill--cold { background: rgba(92, 92, 92, 0.10); border: 1px solid rgba(92, 92, 92, 0.27); color: var(--color-muted); }
.score-pill__value { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semi); letter-spacing: -0.01em; }
.score-pill__tier  { font-family: var(--font-mono); font-size: 9.5px; font-weight: var(--fw-semi); letter-spacing: 0.1em; text-transform: uppercase; }

/* ============================================================
   ANIMATIONS — used by the system
   ============================================================ */

@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.85); } }
@keyframes float-y   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes draw-line { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes shimmer   { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes ticker-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* "Live" / streaming indicator dot */
.live-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-pos);
  box-shadow: 0 0 0 0 var(--color-pos);
  animation: pulse-dot 1.6s var(--ease-out) infinite;
}
.live-dot--ember { background: var(--color-ember); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 2px;
}

/* ============================================================
   QUIET OPERATOR — client cockpit extensions on top of Helios
   Concept A client surface. Additive only; Helios base unchanged.
   ============================================================ */
:root {
  /* INTENT axis (how hot) — word tiers, never a bare % to the client */
  --intent-hot:   var(--color-ember);   /* "Высокий интерес" */
  --intent-warm:  var(--color-warn);    /* "Растущий интерес" */
  --intent-cool:  var(--color-muted);   /* "Первое касание"   */
  /* CONFIDENCE axis (how sure it's them) — independent, own hues */
  --conf-sure:    var(--color-pos);     /* "Подтверждена" ✓ */
  --conf-likely:  var(--color-cool);    /* "Вероятна"     ◑ */
  --conf-early:   var(--color-muted);   /* "Первое касание" ○ */

  /* Cockpit density (persisted toggle: condensed/regular/relaxed) */
  --row-h-condensed: 40px;
  --row-h-regular:   46px;
  --row-h-relaxed:   56px;
  --rail-w:          212px;   /* segments rail */
  --peek-w:          392px;   /* non-modal slide-over */
  --appbar-h:        52px;

  --table-divider:       1px solid var(--color-line);
  --row-selected-bg:     var(--color-bg-deep);
  --row-selected-accent: 2px;  /* inset ember bar on selected row */
}

/* Keyboard hint cap — Superhuman-style triage affordance */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--color-muted); background: var(--color-surface);
  border: 1px solid var(--color-line-strong); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.04);
}
.kbd--dark {
  color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16); box-shadow: none;
}

/* Selected queue row — inset ember bar (no motion) */
.qrow--selected {
  background: var(--row-selected-bg);
  box-shadow: inset var(--row-selected-accent) 0 0 0 var(--color-ember);
}

/* Score ring draw-on (no number inside — the word carries the meaning) */
@keyframes ring-draw { to { stroke-dashoffset: var(--ring-target, 0); } }
/* Optimistic reveal + listening ping (skeletons, never spinners) */
@keyframes a-revealrow { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes a-ping      { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }