/* IP Copilot — LATTICE design tokens.
   Every value a page uses MUST resolve to one of these variables.
   Magic numbers outside this file: zero tolerance. New value needed?
   It goes in tokens.css first, then gets used — never the other way round. */
:root {
  /* ── type ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-num:  "SF Mono", "Menlo", "Roboto Mono", ui-monospace, monospace; /* numbers + status labels only, tabular-nums */
  --font-label: var(--font-num);

  /* type scale */
  --text-2xl: 20px; /* page titles, KPI numbers */
  --text-lg:  15px; /* panel titles */
  --text-base:13px; /* base — body copy, all controls */
  --text-sm:  12px; /* secondary info */
  --text-xs:  11px; /* table headers, labels, badges */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* ── grayscale — the only palette. Status/hierarchy/emphasis = shade, never hue ── */
  --paper:      #f7f7f5; /* page background */
  --gray-0:     #ffffff; /* card background */
  --gray-1:     #f0f0ee; /* hover fill */
  --gray-2:     #e8e8e5; /* selected / pressed fill */
  --gray-3:     #e4e4e1; /* hairline */
  --gray-4:     #9b9b98; /* tertiary text / placeholder */
  --gray-5:     #5c5c5a; /* secondary text */
  --ink:        #1a1a1a; /* the one heavy color — primary text, primary actions, solid badges */
  --overlay:    rgba(26,26,26,.25);   /* modal/drawer scrim */
  --focus-ring: rgba(26,26,26,.06);   /* focus ring halo */

  /* semantic aliases onto the ramp — components consume these, never raw hex */
  --color-ink:            var(--ink);
  --color-muted:          var(--gray-5);
  --color-faint:          var(--gray-4);
  --color-soft:           var(--paper);
  --color-surface-solid:  var(--gray-0);
  --color-surface-strong: var(--gray-2);
  --color-surface:        var(--gray-0);
  --color-line:           var(--gray-3);
  --color-line-strong:    var(--gray-3);
  --color-hover:          var(--gray-1);
  --color-pressed:        var(--gray-2);
  --color-sidebar:        var(--paper);
  --color-sidebar-accent: var(--ink);
  --color-sidebar-accent-soft: var(--gray-2);
  --color-segment:        var(--gray-1);
  --label-ink:            var(--gray-5);
  --color-accent:         var(--ink);
  /* danger is the ONE deliberate exception — destructive actions only, never status */
  --color-danger:      #e0322a;
  --color-danger-soft: rgba(224,50,42,.10);

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

  /* ── radius — two sizes only ── */
  --radius-sm:   4px;  /* small elements: badges, chips */
  --radius:      6px;  /* cards, controls, buttons, inputs, modals */
  --radius-ctl:  var(--radius);
  --radius-pill: 999px; /* fully-rounded pills — chips only, not a "large radius" per se */

  /* ── border width — always 1px ── */
  --border-w: 1px;

  /* ── motion ── */
  --duration-hover:  120ms; /* hover states */
  --duration-enter:  200ms; /* drawer / toast entrance */
  --duration-fast:   var(--duration-hover);
  --duration-base:   var(--duration-hover);
  --duration-slow:   var(--duration-enter);
  --ease: ease;

  /* ── elevation — two tiers only ── */
  --shadow-flat:  0 1px 2px rgba(26,26,26,.04);
  --shadow-float: 0 8px 24px rgba(26,26,26,.10); /* overlays only: modal, drawer, dropdown */
  --shadow-none:  none;
  --shadow-card:  var(--shadow-flat);
  --shadow-modal: var(--shadow-float);
  --shadow-focus-ring: 0 0 0 3px var(--focus-ring);

  /* ── layout skeleton — identical on every page ── */
  --sidebar-w:     200px;
  --content-max-w: 920px;

  /* ── control density ── */
  --control-h: 28px;
}