/* TeleGraphyx · Design tokens v2
   ──────────────────────────────────────────────────────────────────
   Direction: B (Data-first) + K2 (Live blue) + K3 (Editorial italic)
   Light only for now; dark = phase 2.
   Tokens drive: web cabinet, mini-app management screens.
*/

/* ─── 1. fonts ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ─── 2. brand colors (TeleGraphyx) ─────────────────── */
  --tg-blue:           rgb(0, 128, 255);     /* primary action, accent */
  --tg-blue-press:     rgb(7, 119, 231);     /* :active state */
  --tg-blue-hover:     rgb(51, 153, 255);    /* :hover state */
  --tg-blue-soft:      rgb(153, 204, 255);   /* tints, dividers in blue zones */
  --tg-blue-bg:        rgba(0, 128, 255, 0.08);   /* hover bg, subtle highlight */
  --tg-blue-bg-2:      rgba(0, 128, 255, 0.14);   /* press bg, focus ring fill */
  --tg-blue-glow:      rgba(0, 128, 255, 0.24);   /* shadow glow on featured */
  --tg-blue-glow-2:    rgba(0, 128, 255, 0.4);    /* stronger pulse glow */
  --tg-blue-tint-bg:   rgb(245, 250, 255);   /* very subtle blue panel bg */

  /* ─── 3. ink + neutral scale ────────────────────────── */
  --tg-ink:            rgb(38, 40, 45);      /* primary text, headings */
  --tg-ink-2:          rgb(60, 66, 76);      /* secondary text */
  --tg-mute:           rgb(143, 158, 176);   /* tertiary, labels, captions */
  --tg-mute-2:         rgb(180, 192, 208);   /* placeholder, disabled */

  --tg-line:           rgba(143, 158, 176, 0.14);  /* table rows, dividers */
  --tg-line-2:         rgba(143, 158, 176, 0.24);  /* card borders */
  --tg-line-3:         rgba(143, 158, 176, 0.4);   /* input borders */

  --tg-paper:          rgb(248, 249, 251);   /* page background */
  --tg-surface:        rgb(255, 255, 255);   /* card surface */
  --tg-surface-2:      rgb(244, 246, 248);   /* nested surface, hover */
  --tg-surface-ink:    rgb(38, 40, 45);      /* dark surface (for v2 dark contrast) */

  /* ─── 4. status colors ──────────────────────────────── */
  --tg-up:             rgb(0, 168, 96);      /* positive delta (green, accessible) */
  --tg-up-bg:          rgba(0, 168, 96, 0.1);
  --tg-down:           rgb(255, 64, 0);      /* negative delta (TG orange-red) */
  --tg-down-bg:        rgba(255, 64, 0, 0.08);
  --tg-warn:           rgb(255, 152, 0);     /* warnings */
  --tg-warn-bg:        rgba(255, 152, 0, 0.1);

  /* ─── 5. data viz palette ───────────────────────────── */
  --tg-data-1:         rgb(0, 128, 255);     /* primary line (blue) */
  --tg-data-2:         rgb(143, 158, 176);   /* secondary line (mute, dashed) */
  --tg-data-3:         rgb(0, 168, 96);      /* tertiary (up) */
  --tg-data-4:         rgb(255, 152, 0);     /* tertiary (warn) */
  --tg-data-5:         rgb(120, 80, 220);    /* tertiary (purple, for 5+ series) */

  /* ─── 6. type ───────────────────────────────────────── */
  --tg-font-ui:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tg-font-display:   'Inter', system-ui, sans-serif;
  --tg-font-italic:    'Instrument Serif', Georgia, serif;     /* K3: editorial italic accent */
  --tg-font-mono:      'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* type scale (1.20 ratio, base 14px) */
  --tg-text-3xs:       11px;     /* eyebrows, micro labels */
  --tg-text-2xs:       12px;     /* captions, meta */
  --tg-text-xs:        13px;     /* table cells, helper text */
  --tg-text-sm:        14px;     /* body, default UI */
  --tg-text-base:      15px;     /* body emphasis */
  --tg-text-md:        16px;     /* card titles */
  --tg-text-lg:        18px;     /* section titles */
  --tg-text-xl:        22px;     /* h3 */
  --tg-text-2xl:       28px;     /* h2 */
  --tg-text-3xl:       36px;     /* h1 / page title */
  --tg-text-4xl:       44px;     /* hero numbers */
  --tg-text-5xl:       56px;     /* hero KPI */

  /* font weights */
  --tg-fw-400:         400;
  --tg-fw-500:         500;
  --tg-fw-600:         600;
  --tg-fw-700:         700;
  --tg-fw-800:         800;
  --tg-fw-900:         900;

  /* line heights */
  --tg-lh-tight:       1.05;
  --tg-lh-snug:        1.2;
  --tg-lh-normal:      1.4;
  --tg-lh-loose:       1.6;

  /* letter spacing */
  --tg-ls-tight:       -0.025em;     /* hero numbers, big titles */
  --tg-ls-snug:        -0.015em;     /* section titles */
  --tg-ls-normal:      0;
  --tg-ls-wide:        0.04em;
  --tg-ls-wider:       0.08em;       /* eyebrows */
  --tg-ls-widest:      0.12em;       /* SECTION LABELS */

  /* ─── 7. spacing ────────────────────────────────────── */
  --tg-space-1:        4px;
  --tg-space-2:        8px;
  --tg-space-3:        12px;
  --tg-space-4:        16px;
  --tg-space-5:        20px;
  --tg-space-6:        24px;
  --tg-space-7:        28px;
  --tg-space-8:        32px;
  --tg-space-10:       40px;
  --tg-space-12:       48px;
  --tg-space-16:       64px;
  --tg-space-20:       80px;
  --tg-space-24:       96px;

  /* ─── 8. radii ──────────────────────────────────────── */
  --tg-r-sm:           6px;      /* badges, chips */
  --tg-r-md:           10px;     /* buttons, inputs */
  --tg-r-lg:           14px;     /* cards */
  --tg-r-xl:           18px;     /* panels */
  --tg-r-2xl:          24px;     /* hero blocks */
  --tg-r-full:         9999px;

  /* ─── 9. shadows ────────────────────────────────────── */
  --tg-shadow-card:    0 1px 0 0 var(--tg-line-2);                              /* hairline only */
  --tg-shadow-elev-1:  0 1px 2px rgba(38, 40, 45, 0.04), 0 0 0 1px var(--tg-line-2);
  --tg-shadow-elev-2:  0 4px 12px -2px rgba(38, 40, 45, 0.06), 0 0 0 1px var(--tg-line-2);
  --tg-shadow-elev-3:  0 16px 48px -12px rgba(38, 40, 45, 0.16), 0 0 0 1px var(--tg-line-2);
  --tg-shadow-blue:    0 4px 16px -4px var(--tg-blue-glow);                     /* blue button */
  --tg-shadow-focus:   0 0 0 3px var(--tg-blue-bg-2);                           /* focus ring */

  /* ─── 10. layout ───────────────────────────────────── */
  --tg-sidebar-w:      240px;
  --tg-topbar-h:       60px;
  --tg-content-max:    1280px;
  --tg-content-pad:    32px;

  /* ─── 11. motion ──────────────────────────────────── */
  --tg-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --tg-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --tg-dur-fast:       120ms;
  --tg-dur-base:       200ms;
  --tg-dur-slow:       400ms;
}

/* ───────────────────────────────────────────────────── */
/* base reset                                              */
/* ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--tg-font-ui);
  font-size: var(--tg-text-sm);
  line-height: var(--tg-lh-normal);
  color: var(--tg-ink);
  background: var(--tg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv02';  /* Inter stylistic sets */
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* tabular numerals for all data, by default */
.tg-num,
.tg-table td.num,
.tg-kpi-v {
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────── */
/* type utilities                                         */
/* ───────────────────────────────────────────────────── */
.tg-eyebrow {
  font-weight: var(--tg-fw-700);
  font-size: var(--tg-text-3xs);
  letter-spacing: var(--tg-ls-widest);
  text-transform: uppercase;
  color: var(--tg-mute);
}

.tg-h1 {
  font-weight: var(--tg-fw-800);
  font-size: var(--tg-text-3xl);
  line-height: var(--tg-lh-tight);
  letter-spacing: var(--tg-ls-tight);
  color: var(--tg-ink);
  margin: 0;
}

.tg-h2 {
  font-weight: var(--tg-fw-700);
  font-size: var(--tg-text-2xl);
  line-height: var(--tg-lh-snug);
  letter-spacing: var(--tg-ls-snug);
  color: var(--tg-ink);
  margin: 0;
}

.tg-h3 {
  font-weight: var(--tg-fw-700);
  font-size: var(--tg-text-xl);
  line-height: var(--tg-lh-snug);
  letter-spacing: var(--tg-ls-snug);
  color: var(--tg-ink);
  margin: 0;
}

.tg-h4 {
  font-weight: var(--tg-fw-700);
  font-size: var(--tg-text-md);
  line-height: var(--tg-lh-snug);
  color: var(--tg-ink);
  margin: 0;
}

.tg-italic {
  font-family: var(--tg-font-italic);
  font-style: italic;
  font-weight: var(--tg-fw-400);
  letter-spacing: 0;
}

/* K3 — editorial italic accent in headings */
.tg-h1 em, .tg-h2 em, .tg-h3 em {
  font-family: var(--tg-font-italic);
  font-style: italic;
  font-weight: var(--tg-fw-400);
  letter-spacing: 0;
}
.tg-h1 em { font-size: 0.92em; }
.tg-h2 em { font-size: 0.96em; }
.tg-h3 em { font-size: 1em; }

.tg-mute  { color: var(--tg-mute); }
.tg-up    { color: var(--tg-up); }
.tg-down  { color: var(--tg-down); }

/* ───────────────────────────────────────────────────── */
/* K2 — live blue: pulse animation for featured accents   */
/* ───────────────────────────────────────────────────── */
@keyframes tg-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 var(--tg-blue-glow); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

.tg-pulse {
  animation: tg-pulse-blue 2.4s var(--tg-ease-in-out) infinite;
}

/* ───────────────────────────────────────────────────── */
/* button primitives                                      */
/* ───────────────────────────────────────────────────── */
.tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tg-space-2);
  font-family: inherit;
  font-weight: var(--tg-fw-600);
  font-size: var(--tg-text-sm);
  padding: 10px 18px;
  border-radius: var(--tg-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--tg-dur-fast) var(--tg-ease-out),
              box-shadow var(--tg-dur-fast) var(--tg-ease-out),
              transform var(--tg-dur-fast) var(--tg-ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.tg-btn:active { transform: translateY(0.5px); }
.tg-btn:focus-visible { outline: none; box-shadow: var(--tg-shadow-focus); }

.tg-btn-primary {
  background: var(--tg-blue);
  color: white;
  box-shadow: var(--tg-shadow-blue);
}
.tg-btn-primary:hover { background: var(--tg-blue-hover); }
.tg-btn-primary:active { background: var(--tg-blue-press); }

.tg-btn-ghost {
  background: var(--tg-surface);
  color: var(--tg-ink);
  border-color: var(--tg-line-2);
}
.tg-btn-ghost:hover { background: var(--tg-surface-2); border-color: var(--tg-line-3); }

.tg-btn-text {
  background: transparent;
  color: var(--tg-blue);
  padding: 6px 10px;
}
.tg-btn-text:hover { background: var(--tg-blue-bg); }

/* ───────────────────────────────────────────────────── */
/* card primitives                                        */
/* ───────────────────────────────────────────────────── */
.tg-card {
  background: var(--tg-surface);
  border-radius: var(--tg-r-lg);
  box-shadow: var(--tg-shadow-elev-1);
}
.tg-card-pad { padding: var(--tg-space-6); }
.tg-card-pad-lg { padding: var(--tg-space-8); }

/* hairline divider */
.tg-divider {
  height: 1px;
  background: var(--tg-line-2);
  border: 0;
  margin: 0;
}