/* ============================================================
   DESIGN TOKENS
   Minimal-color system: one primary hue, a cool-tinted neutral
   ramp (not flat grayscale), and semantic colors reserved for
   status/risk. No more than ~5 hues in the whole product.
   ============================================================ */

:root {
  /* ---- Neutral scale — cool, faintly blue-tinted (not flat grey) ---- */
  --n-0: #ffffff;
  --n-10: #f6f7fb;
  --n-20: #edeff6;
  --n-30: #e0e3ed;
  --n-40: #ccd0dd;
  --n-50: #aab0c2;
  --n-60: #8891a6;
  --n-70: #666f87;
  --n-80: #4a5268;
  --n-90: #323a52;
  --n-95: #1f2439;
  --n-99: #12151f;
  --n-100: #060710;

  /* ---- Surfaces ---- */
  --surface: var(--n-0);
  --surface-dim: var(--n-10);
  --surface-variant: var(--n-20);
  --surface-container: var(--n-10);
  --surface-container-high: var(--n-20);
  --surface-inverse: var(--n-95);

  /* ---- On-surface text ---- */
  --on-surface: var(--n-99);
  --on-surface-variant: var(--n-80);
  --on-surface-muted: var(--n-70);
  --on-surface-disabled: var(--n-50);
  --on-inverse: var(--n-0);

  /* ---- Structural ---- */
  --outline: var(--n-30);
  --outline-strong: var(--n-60);
  --divider: var(--n-30);

  /* ---- Primary brand color ----
     TCS publishes no color palette (their logo rule is strict
     monochrome), so this is a considered, minimal substitute: one
     confident indigo, used for primary actions, active states,
     links and focus — not a repaint of the whole UI. Everything
     else still leans on the neutral ramp above. */
  /* Flowbite's actual default primary blue ramp */
  --primary-50: #ebf5ff;
  --primary-100: #e1effe;
  --primary-200: #c3ddfd;
  --primary-300: #a4cafe;
  --primary-400: #76a9fa;
  --primary-500: #3f83f8;
  --primary-600: #1c64f2;
  --primary-700: #1a56db;
  --primary-800: #1e429f;
  --primary-900: #233876;
  --primary: var(--primary-700);
  --on-primary: #ffffff;
  --primary-container: var(--primary-50);
  --on-primary-container: var(--primary-700);
  --primary-hover: var(--primary-800);
  --accent: var(--primary-600);
  --accent-hover: var(--primary-700);
  --accent-container: var(--primary-50);

  /* ---- Chart palette (restrained — used only in data viz) ---- */
  /* Flowbite's named palette used for chart series */
  --chart-1: var(--primary-600);
  --chart-2: #0e9f6e;
  --chart-3: #c27803;
  --chart-4: #9061f9;
  --chart-5: #f05252;

  /* ---- Semantic accents: status / alerts / incidents ---- */
  /* Flowbite's documented green/yellow/red badge & alert colors */
  --status-success: #057a55;
  --status-success-bg: #def7ec;
  --status-warning: #c2570a;
  --status-warning-bg: #fdf0e3;
  --status-danger: #dc2626;
  --status-danger-bg: #fdeaea;
  --status-info: #1e429f;
  --status-info-bg: #e1effe;

  /* ---- Elevation — soft, faintly cool-tinted shadows ---- */
  --elev-0: none;
  /* Tailwind's stock shadow scale, as Flowbite uses it */
  --elev-1: 0 1px 2px 0 rgba(0,0,0,.05);
  --elev-2: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --elev-3: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --elev-4: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);

  /* ---- Shape ---- */
  /* Flowbite's rounded-md / rounded-lg / rounded-xl / rounded-2xl steps */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

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

  /* ---- Type scale ---- */
  --font-body: 'Inter', 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-display: 34px;
  --fs-headline: 24px;
  --fs-title-lg: 20px;
  --fs-title: 16px;
  --fs-title-sm: 14px;
  --fs-body: 14px;
  --fs-body-lg: 15px;
  --fs-label: 12px;
  --fs-label-sm: 11px;

  --lh-tight: 1.2;
  --lh-normal: 1.5;

  /* ---- Layout ---- */
  --nav-rail-width: 88px;
  --topbar-height: 64px;
  --menu-flyout-width: 280px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.2,0,0,1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; }
}