/* apps/web/styles/tokens.css
 * NormanAI design tokens — single source of truth.
 * Imported before styles.css. Never reference raw hex in components.
 *
 * Principles (Phase 1.5):
 *  - Grayscale hierarchy first; color is semantic only
 *  - Two font weights (400, 600) + one mono
 *  - Spacing ladder: 4 / 8 / 12 / 16 / 24 / 32 / 48 (no arbitrary values)
 *  - Motion: single base duration + ease-out; shaped tokens for emphasis
 */

:root {
  /* ===== Surfaces (dark-first grayscale ladder) ===== */
  --surface-0: #0a0b0d;          /* app bg (deepest) */
  --surface-1: #111318;          /* card bg */
  --surface-2: #161921;          /* elevated card / modal */
  --surface-3: #1d2129;          /* hover, focus-within panel */
  --surface-4: #252a33;          /* pressed, selected */

  /* ===== Borders ===== */
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);

  /* ===== Text ladder (4 levels + inverse) ===== */
  --text-1: #f5f6f8;             /* KPI values, page titles */
  --text-2: #d0d4dc;             /* body */
  --text-3: #8a91a0;             /* labels, captions */
  --text-4: #555b68;             /* dim / placeholder */
  --text-inverse: #0a0b0d;       /* on light backgrounds */

  /* ===== Semantic color — ONLY for state ===== */
  --color-success: #22c55e;      /* active, healthy, up */
  --color-warning: #eab308;      /* attention needed */
  --color-danger:  #ef4444;      /* risk, blocked, down */
  --color-info:    #3b82f6;      /* notifications, hints */
  --color-accent:  #5eead4;      /* JD's brand mark, focal only */

  /* Muted backgrounds for semantic badges (8% of base) */
  --bg-success: rgba(34, 197, 94, 0.08);
  --bg-warning: rgba(234, 179, 8, 0.08);
  --bg-danger:  rgba(239, 68, 68, 0.08);
  --bg-info:    rgba(59, 130, 246, 0.08);

  /* ===== Spacing ladder ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ===== Typography ===== */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;

  --weight-regular:  400;
  --weight-semibold: 600;

  /* ===== Radii ===== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 999px;

  /* ===== Motion ===== */
  --motion-fast: 100ms;
  --motion-base: 150ms;
  --motion-slow: 240ms;
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);

  /* ===== Shadow (sparingly — hierarchy via bg contrast first) ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* ===== Table densities ===== */
  --table-row-height:    40px;
  --table-row-separator: rgba(255, 255, 255, 0.06);

  /* ===== Z-index scale ===== */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* Tabular-nums utility — applied to all numeric table cells.
   Component CSS can opt in without redefining the font stack. */
.num,
td.num,
th.num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  text-align: right;
}