/* tokens.css — собрано из site-static/ds/tokens/* (порядок @import из ds/styles.css). T0. */
/* ============================================================
   Salistica — Fonts
   The system uses a single typeface: Inter.
   Shipped to consumers via Google Fonts (no local binaries).
   font-feature-settings 'cv11' + 'ss01' are mandatory on body —
   they give the correct single-storey "1" and open "6".
   ============================================================ */

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

@font-face {
  /* Alias so consumers can reference the family via the token below
     even if the Google Fonts import is blocked; falls back to system UI. */
  font-family: 'InterFallback';
  src: local('Inter'), local('Inter-Regular');
  font-display: swap;
}
/* ============================================================
   Salistica — Color tokens
   The palette is CLOSED. No new colors.
   If you think you need a new shade, you picked the wrong
   semantic token. Brand accent is orange (#ea580c).
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg-app:        #f6f7f9;   /* page background */
  --bg-card:       #ffffff;   /* cards, popovers, toolbars */
  --border:        #e9ecf1;   /* primary divider line */
  --border-strong: #e2e8f0;   /* buttons, inputs — slightly darker */
  --divider:       #f1f3f7;   /* inner row dividers in tables */
  --hover:         #f8fafc;   /* hover bg for rows, ghost buttons */

  /* ---- Text (4-level hierarchy) ---- */
  --text:        #0f172a;   /* primary */
  --text-muted:  #64748b;   /* secondary — axis labels, descriptions */
  --text-light:  #94a3b8;   /* tertiary — hints, weekday labels */
  --text-faint:  #cbd5e1;   /* quaternary — inactive elements */

  /* ---- Brand accent (orange) ---- */
  --accent:      #ea580c;   /* CTA, prices, main brand accent */
  --accent-hover:#c2410c;   /* hover/press for primary */
  --accent-soft: #fff5ee;   /* tinted background */
  --accent-line: #fed7aa;   /* tinted border */

  /* ---- Semantic: info (neutral) ---- */
  --info:        #2563eb;
  --info-soft:   #eff6ff;
  --info-line:   #dbeafe;

  /* ---- Semantic: success ---- */
  --success:      #16a34a;
  --success-soft: #ecfdf5;
  --success-line: #bbf7d0;

  /* ---- Semantic: warning ---- */
  --warning:      #d97706;
  --warning-soft: #fffbeb;
  --warning-line: #fde68a;

  /* ---- Semantic: danger ---- */
  --danger:      #dc2626;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;

  /* ---- Tip (PURPLE) — only for "How to read this report" callouts.
          Never use in place of --info. ---- */
  --tip:      #7c3aed;
  --tip-soft: #faf5ff;
  --tip-line: #e9d5ff;

  /* ---- Data series (charts) ----
          series-1 (orange) = primary metric, usually revenue.
          series-2 (slate)  = count (visits, clients). Do not swap. */
  --series-1: #ea580c;
  --series-2: #0f172a;
  --series-3: #2563eb;
  --series-4: #16a34a;
  --series-5: #9333ea;
  --series-6: #db2777;
  --series-7: #0891b2;
  --series-8: #ca8a04;
}
/* ============================================================
   Salistica — Typography tokens
   Single family: Inter. Never use a different font.
   Minimum sizes: 11px on charts, 12.5px for text. Never smaller.
   ============================================================ */

:root {
  --font: 'Inter', 'InterFallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* feature settings — apply on body, always */
  --font-features: 'cv11' 1, 'ss01' 1;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* ---- Type ramp (font / size / line-height) ----
     Use the semantic aliases in components; raw px documented for reference. */
  --type-h1-page:  700 26px/1.2 var(--font);   /* page title, ls -0.02em */
  --type-h1-screen:600 22px/1.25 var(--font);  /* .head h1, ls -0.01em */
  --type-h2:       600 17px/1.3 var(--font);   /* section heading, ls -0.005em */
  --type-card-title:600 14px/1.4 var(--font);  /* card title, ls -0.005em */
  --type-body:     400 13.5px/1.55 var(--font);/* body */
  --type-hint:     400 12.5px/1.5 var(--font); /* hint / description */
  --type-kicker:   600 11.5px/1.4 var(--font); /* uppercase over-title */
  --type-axis:     500 11px/1.3 var(--font);   /* chart axis labels */

  /* ---- Letter-spacing ---- */
  --ls-tight:   -0.02em;   /* large display */
  --ls-snug:    -0.01em;   /* screen titles */
  --ls-normal:  0;         /* @kind other */
  --ls-kicker:  0.06em;    /* uppercase kickers 0.05–0.08em */
  --ls-kicker-wide: 0.08em;
}
/* ============================================================
   Salistica — Spacing, radius, shadow, motion tokens
   Radii come ONLY from the scale: 6 / 8 / 12 / 16.
   Never use 4, 10, 14, 20.
   ============================================================ */

:root {
  /* ---- Radii (closed scale) ---- */
  --radius-xs: 6px;    /* small pills, badges, code */
  --radius-sm: 8px;    /* buttons, inputs, filter chips */
  --radius:    12px;   /* standard card */
  --radius-lg: 16px;   /* modals, large cards */

  /* ---- Spacing (used for gaps, padding) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 20px;
  --space-8: 24px;
  --space-10: 32px;
  --space-12: 48px;
  --space-14: 56px;

  /* ---- Card geometry ---- */
  --card-pad: 22px;       /* standard card padding (20–22) */
  --grid-gap: 16px;       /* default grid gap */

  /* ---- App shell metrics ---- */
  --topbar-h: 56px;
  --sidebar-w: 232px;
  --content-max: 1320px;

  /* ---- Shadows (used sparingly, mostly for overlays) ---- */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
  --shadow-lg: 0 18px 40px rgba(15,23,42,.18);

  /* focus ring */
  --focus-ring: 0 0 0 3px rgba(15,23,42,.08);
  --focus-ring-accent: 0 0 0 3px rgba(234,88,12,.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast: .12s; /* @kind other */
  --dur-base: .18s; /* @kind other */
}
/* ============================================================
   Salistica — Base element styles
   The minimum global setup every Salistica surface needs.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-app);
  /* mandatory — correct "1" and open "6" */
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

::selection { background: var(--accent-soft); }

/* Numbers in tables / metrics: tabular figures for clean alignment */
.num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}