/* ============================================================================
   KrivAI Enterprise Design System — Design Tokens
   Version 1.1 (2026-07-02)
   Restrained, professional, enterprise palette. No gradients, no neon.
   Copied into each app at frontend/src/ui/tokens.css and imported once in main.
   ============================================================================ */
:root {
  /* --- Neutrals (foundation) --- */
  --ds-white: #ffffff;
  --ds-bg: #f7f8fa;          /* app background (off-white) */
  --ds-surface: #ffffff;     /* cards, panels */
  --ds-surface-2: #f1f3f5;   /* subtle raised/alt rows */
  --ds-surface-3: #e9edf1;   /* skeleton / deeper alt */
  --ds-border: #e3e6ea;
  --ds-border-strong: #cbd2d9;
  --ds-text: #1a1d21;        /* charcoal — primary text */
  --ds-text-muted: #5b6570;
  --ds-text-subtle: #8a929c;

  /* --- Brand: ONE primary, ONE accent (used sparingly) --- */
  --ds-primary: #2563eb;
  --ds-primary-hover: #1d4ed8;
  --ds-primary-active: #1e40af;
  --ds-primary-soft: #eff4ff;      /* tint background */
  --ds-primary-border: #c7d7fb;    /* tint border for soft surfaces */
  --ds-primary-contrast: #ffffff;
  --ds-accent: #0f766e;            /* teal — secondary accent only when necessary */

  /* --- Functional status (never decorative) --- */
  --ds-success: #15803d;  --ds-success-soft: #ecfdf3;
  --ds-warning: #b45309;  --ds-warning-soft: #fffaeb;
  --ds-danger:  #b91c1c;  --ds-danger-soft:  #fef3f2;
  --ds-info:    #0369a1;  --ds-info-soft:    #eff8ff;

  /* --- Spacing — strict 8-pt system (4 is the half-step) --- */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px;
  --ds-space-9: 96px;

  /* --- Radius --- */
  --ds-radius-sm: 6px; --ds-radius: 8px; --ds-radius-lg: 12px; --ds-radius-pill: 999px;

  /* --- Typography (clean system stack, no decorative fonts) --- */
  --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --ds-fs-xs: 12px; --ds-fs-sm: 13px; --ds-fs-base: 14px; --ds-fs-md: 16px;
  --ds-fs-lg: 20px; --ds-fs-xl: 24px; --ds-fs-2xl: 30px; --ds-fs-3xl: 38px;
  --ds-lh: 1.55; --ds-lh-tight: 1.25;
  --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600;

  /* --- Elevation — subtle, layered (two-part shadows for honest depth) --- */
  --ds-shadow-xs: 0 1px 1px rgba(16,24,40,.04);
  --ds-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --ds-shadow:    0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --ds-shadow-md: 0 4px 10px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --ds-shadow-lg: 0 12px 28px rgba(16,24,40,.12), 0 4px 10px rgba(16,24,40,.06);

  /* --- Focus ring (accessibility, WCAG) --- */
  --ds-focus-ring: rgba(37,99,235,.40);
  --ds-focus: 0 0 0 3px var(--ds-focus-ring);
  --ds-focus-inset: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-focus-ring);

  /* --- Layout --- */
  --ds-container: 1200px;
  --ds-container-narrow: 760px;
  --ds-header-h: 56px;
  --ds-sidebar-w: 240px;

  /* --- Motion (minimal, respects reduced-motion below) --- */
  --ds-transition: 140ms ease;
  --ds-transition-slow: 220ms ease;
}

/* Base reset + element defaults */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ds-font);
  font-size: var(--ds-fs-base);
  line-height: var(--ds-lh);
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--ds-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Focus: only for keyboard users, and always visible. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}