/* =========================================================================
   Trena — Design Tokens
   ========================================================================= */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand:           #ed5946;        /* Trena orange */
  --brand-hover:     #d94a38;
  --brand-active:    #c53e2d;
  --brand-soft:      #fdebe7;        /* tinted backgrounds */
  --brand-soft-2:    #fbd8d2;

  /* ---- Neutrals ------------------------------------------------------- */
  --ink:             #1a1a1a;        /* primary text */
  --ink-2:           #2e2e2c;
  --ink-secondary:   #595955;        /* secondary text */
  --ink-muted:       #8e8e88;        /* muted, captions */
  --ink-disabled:    #b8b8b2;

  --line:            #e8e8e6;        /* borders */
  --line-strong:     #d6d6d2;
  --line-soft:       #f0f0ed;

  --surface:         #ffffff;        /* card / content */
  --surface-raised:  #ffffff;
  --bg-app:          #f6f5f2;        /* warm off-white app bg */
  --bg-subtle:       #faf9f6;        /* striped/zebra rows */
  --overlay-scrim:   rgba(20, 18, 16, 0.45);

  /* ---- Sidebar (dark anchor) ----------------------------------------- */
  --sb-bg:           #161614;
  --sb-bg-hover:     #232320;
  --sb-text:         #d1d1cc;
  --sb-text-muted:   #8a8a82;
  --sb-active-bg:    var(--brand);
  --sb-active-text:  #ffffff;

  /* ---- Semantic ------------------------------------------------------- */
  --success:         #15803d;
  --success-soft:    #dcfce7;
  --success-ink:     #14532d;

  --warning:         #b45309;
  --warning-soft:    #fef3c7;
  --warning-ink:     #78350f;

  --danger:          #b91c1c;
  --danger-soft:     #fee2e2;
  --danger-ink:      #7f1d1d;

  --info:            #1d4ed8;
  --info-soft:       #dbeafe;
  --info-ink:        #1e3a8a;

  /* ---- Group colors (5 групп) ----------------------------------------
     System: одинаковая lightness, distinguishable hues, working side-by-side.
     Each: stripe (saturated accent) + tint (very light bg). */
  --g-malyshi-stripe:  #d97706;  --g-malyshi-tint:  #fef3c7;  --g-malyshi-ink:  #78350f;
  --g-junior-stripe:   #15803d;  --g-junior-tint:   #dcfce7;  --g-junior-ink:   #14532d;
  --g-middle-stripe:   #0369a1;  --g-middle-tint:   #e0f2fe;  --g-middle-ink:   #0c4a6e;
  --g-senior-stripe:   #7c3aed;  --g-senior-tint:   #ede9fe;  --g-senior-ink:   #4c1d95;
  --g-teen-stripe:     #be185d;  --g-teen-tint:     #fce7f3;  --g-teen-ink:     #831843;

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-num:  'Inter', 'Inter Tight', system-ui, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  36px;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.5;

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

  --ls-tight:    -0.01em;
  --ls-tighter:  -0.02em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;

  /* ---- Spacing (4px base) ------------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Radii --------------------------------------------------------- */
  --r-xs:    3px;
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    8px;
  --r-xl:    12px;
  --r-2xl:   16px;
  --r-full:  9999px;

  /* ---- Shadows (subtle, no material 3D) ----------------------------- */
  --sh-xs:   0 1px 1px rgba(20, 20, 18, 0.04);
  --sh-sm:   0 1px 2px rgba(20, 20, 18, 0.05), 0 1px 1px rgba(20, 20, 18, 0.04);
  --sh-md:   0 4px 10px -3px rgba(20, 20, 18, 0.08), 0 2px 4px -2px rgba(20, 20, 18, 0.04);
  --sh-lg:   0 16px 32px -10px rgba(20, 20, 18, 0.14), 0 4px 8px -3px rgba(20, 20, 18, 0.06);
  --sh-xl:   0 24px 48px -12px rgba(20, 20, 18, 0.22);
  --sh-focus: 0 0 0 3px rgba(237, 89, 70, 0.22);
  --sh-focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);

  /* ---- Motion -------------------------------------------------------- */
  --t-fast:   100ms;
  --t-base:   160ms;
  --t-slow:   220ms;
  --t-slower: 320ms;
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout -------------------------------------------------------- */
  --sidebar-w:  220px;
  --header-h:   56px;
  --drawer-w:   480px;
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'cv01';
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
p { margin: 0; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Type utilities
   ========================================================================= */
.t-display { font-size: var(--fs-4xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tighter); }
.t-h1      { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.t-h2      { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.t-h3      { font-size: var(--fs-xl);  font-weight: var(--fw-semibold); }
.t-h4      { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
.t-body    { font-size: var(--fs-md);  font-weight: var(--fw-regular); }
.t-sm      { font-size: var(--fs-sm);  font-weight: var(--fw-regular); color: var(--ink-secondary); }
.t-xs      { font-size: var(--fs-xs);  font-weight: var(--fw-medium); color: var(--ink-muted); letter-spacing: var(--ls-wide); }
.t-eyebrow { font-size: var(--fs-xs);  font-weight: var(--fw-semibold); color: var(--ink-muted); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.t-muted   { color: var(--ink-muted); }
.t-secondary { color: var(--ink-secondary); }