/* ADMINYX · Портал сотрудника — дизайн-токены и база.
   Извлечено из styles.css + console.css консоли. Меняйте цвета здесь. */
@import url("../fonts/adminyx-grid.css");
@import url("../fonts/web-fonts.css");

:root {
  /* ============================================================
     ADMINYX DESIGN-CODE TOKENS — canonical source of truth.
     Names mirror design-code.html exactly. The app's legacy
     aliases below (--bg-0, --ac, --tx-1, --font-d…) all resolve
     to these, so a single edit here re-skins the whole console.
     ============================================================ */

  /* Surfaces */
  --bg:           #0A0A0A;   /* deepest */
  --surface:      #141414;   /* base panel */
  --surface-2:    #1C1C1C;   /* elevated card */
  --surface-3:    #232323;   /* hover / raised */

  /* Foreground */
  --fg:           #FFFFFF;
  --fg-2:         #8A8A8A;
  --fg-3:         #555555;

  /* Accent — lime (runtime-driven by the Tweaks accent) */
  --lime:         #C6FF00;
  --lime-hover:   #A3E000;
  --lime-dim:     rgba(198, 255, 0, 0.15);
  --lime-line:    rgba(198, 255, 0, 0.35);
  --lime-glow:    rgba(198, 255, 0, 0.30);

  /* Status */
  --error:        #FF3B30;
  --warn:         #FFB020;
  --info:         #56E5D1;

  /* Lines */
  --hair:         rgba(255, 255, 255, 0.08);
  --hair-strong:  rgba(255, 255, 255, 0.20);

  /* Type */
  --font-display: "Adminyx Grid", "Inter", "Helvetica Neue", sans-serif;
  --font-body:    "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  /* Radii (hard edges) */
  --r-1: 2px;
  --r-2: 4px;

  /* ============================================================
     LEGACY APP ALIASES → canonical tokens. Kept so the existing
     JSX (which references --bg-0/--ac/--tx-1/--font-d) keeps
     working; every one points at a design-code token above.
     ============================================================ */

  /* Surfaces */
  --bg-0: var(--bg);
  --bg-1: var(--surface);
  --bg-2: var(--surface-2);
  --bg-3: var(--surface-3);
  --bg-glass: rgba(20, 20, 20, 0.78);

  /* Text */
  --tx-1: var(--fg);
  --tx-2: var(--fg-2);
  --tx-3: var(--fg-3);
  --tx-4: #3D3D3D;     /* faint / placeholder (below code floor) */

  /* Accent */
  --ac: var(--lime);
  --ac-bright: var(--lime);
  --ac-hover: var(--lime-hover);
  --ac-dim: var(--lime-dim);
  --ac-line: var(--lime-line);
  --ac-glow: var(--lime-glow);

  /* Functional */
  --ok: var(--info);
  --ok-dim: rgba(86, 229, 209, 0.15);
  --warn-dim: rgba(255, 176, 32, 0.15);
  --bad: var(--error);
  --bad-dim: rgba(255, 59, 48, 0.15);

  /* Hairlines / borders */
  --ln: var(--hair);
  --ln-2: rgba(255, 255, 255, 0.14);
  --ln-strong: var(--hair-strong);

  /* Radii */
  --r-xs: var(--r-1);
  --r-sm: var(--r-1);
  --r-md: var(--r-2);
  --r-lg: var(--r-2);
  --r-xl: 6px;
  --r-pill: var(--r-1);

  /* Shadow (flat, restrained) */
  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px -16px rgba(0, 0, 0, 0.8);
  --sh-2: 0 24px 56px -24px rgba(0, 0, 0, 0.85);
  --sh-ac: 0 0 0 1px var(--ac-line), 0 0 26px rgba(198, 255, 0, 0.25);

  /* Type aliases */
  --font-d: var(--font-display);
  --font-b: var(--font-body);
  --font-m: var(--font-mono);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --spring: cubic-bezier(0.3, 1.36, 0.56, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #root {
  height: 100%;
  width: 100%;
}

body {
  font-family: var(--font-b);
  background: var(--bg-0);
  color: var(--tx-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  letter-spacing: 0;
  /* Adminyx Grid ships real 300/500/700; disable synthesis so 900 maps to
     the Bold face instead of faux-bold. */
  font-synthesis: none;
}

::selection { background: var(--ac); color: #000; }

/* scrollbars */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ln-strong) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--ln-strong); border-radius: 0; border: 3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ln-2); background-clip: padding-box; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; transition: filter .15s ease, transform .12s var(--ease); }
input { font-family: inherit; }

/* generic micro-interactions (filter works on top of any inline background) */
.hv:hover { filter: brightness(1.22); }
.press:active { transform: scale(0.965); }

.mono { font-family: var(--font-m); font-feature-settings: "tnum" 1; letter-spacing: 0; }
.disp {
  font-family: var(--font-d);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.96;
}
.tnum { font-variant-numeric: tabular-nums; }

/* utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-5 { gap: 5px; } .gap-6 { gap: 6px; } .gap-7 { gap: 7px; } .gap-8 { gap: 8px; } .gap-9 { gap: 9px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-13 { gap: 13px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; }
.gap-20 { gap: 20px; } .gap-22 { gap: 22px; } .gap-24 { gap: 24px; }
.spread { justify-content: space-between; }
.center { justify-content: center; }
.fill { flex: 1; }
.wrap { flex-wrap: wrap; }


:root{--st-free:#56E5D1;--st-free-dim:rgba(86,229,209,.13);--st-break:#FFB020;--st-break-dim:rgba(255,176,32,.14);--st-call:#FF3B30;--st-call-dim:rgba(255,59,48,.14)}
@keyframes anim-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}