/* ============================================================
   LIGHT CRISP DESIGN TOKENS
   High-craft minimalism: white ground, ink text, gray hairlines,
   one restrained blue accent, green reserved for status.
   Dark-mode-capable via [data-theme="dark"].

   Token names are the contract consumed by every component;
   only values change here. Never hardcode hex inside components.
   ============================================================ */
:root {
  /* Surfaces — white ground, gray hairlines */
  --bg-primary: #ffffff;
  --bg-secondary: #fafafa;
  --bg-card: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #fafafa;

  /* Text */
  --text-primary: #0a0a0a;
  --text-muted: #475467; /* 5.8:1 on white, 5.5:1 on #fafafa */
  --text-inverse: #ffffff;

  --header-color: #0a0a0a;

  /* Accent — restrained: blue for links/focus/active, near-black fills,
     green reserved for status */
  --accent-primary: #175cd3;
  --accent-secondary: #0a0a0a;
  --accent-highlight: #1849a9;
  --accent-subtle: rgba(23, 92, 211, 0.08);
  --accent-glow: rgba(16, 24, 40, 0.06);

  /* Borders — gray hairlines */
  --border-color: #d0d5dd;
  --border-muted: #e4e7ec;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-family);
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-md: 1rem;
  --text-lg: 1.3rem;
  --text-xl: 1.8rem;
  --text-2xl: 2.5rem;

  /* Shape, elevation, motion */
  --radius-sm: 6px;
  --radius-chip: 6px; /* badges, tags, chips — sets chip shape app-wide */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
  --transition-fast: 150ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-base: 220ms cubic-bezier(0.25, 1, 0.5, 1);

  /* Chrome surfaces & hairlines (header, dropdowns, chips) */
  --overlay-chrome: rgba(255, 255, 255, 0.82); /* sticky header glass */
  --overlay-menu: #ffffff;
  --overlay-soft: rgba(16, 24, 40, 0.05);
  --overlay-softer: rgba(16, 24, 40, 0.03);
  --accent-border: #d0d5dd;

  /* Status semantics — green reserved for status; text values AA-safe on
     light surfaces (>= 4.5:1). Badges/nodes consume these instead of raw hex. */
  --status-ok-text: #1a7f37;
  --status-ok-border: #1a7f37;
  --status-ok-bg: rgba(26, 127, 55, 0.1);
  --status-warn-text: #9a6700;
  --status-warn-border: #9a6700;
  --status-warn-bg: rgba(156, 103, 0, 0.1);
  --status-bad-text: #cf222e;
  --status-bad-border: #cf222e;
  --status-bad-bg: rgba(207, 34, 46, 0.08);
  --status-neutral-text: var(--text-muted);
  --status-neutral-bg: var(--overlay-soft);

  --container-max-width: 1040px;
}

/* Dark variant — one block flips the whole app;
   every component reads tokens only. */
[data-theme="dark"] {
  --bg-primary: #101013;
  --bg-secondary: #16181c;
  --bg-card: #16181c;
  --surface-raised: #191b20;
  --surface-sunken: #0c0d10;

  --text-primary: #f4f5f7;
  --text-muted: #9aa1ad;
  --text-inverse: #101013;
  --header-color: #f4f5f7;

  --accent-primary: #7cb0ff;
  --accent-secondary: #f4f5f7;
  --accent-highlight: #a5cbff;
  --accent-subtle: rgba(124, 176, 255, 0.12);
  --accent-glow: rgba(124, 176, 255, 0.16);

  --border-color: rgba(255, 255, 255, 0.16);
  --border-muted: rgba(255, 255, 255, 0.09);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45);

  --overlay-chrome: rgba(16, 16, 19, 0.78);
  --overlay-menu: #191b20;
  --overlay-soft: rgba(255, 255, 255, 0.06);
  --overlay-softer: rgba(255, 255, 255, 0.03);
  --accent-border: rgba(255, 255, 255, 0.22);

  /* Status — brighter family for dark surfaces */
  --status-ok-text: #2ecc71;
  --status-ok-border: #2ecc71;
  --status-ok-bg: rgba(46, 204, 113, 0.15);
  --status-warn-text: #f1c40f;
  --status-warn-border: #f1c40f;
  --status-warn-bg: rgba(241, 196, 15, 0.15);
  --status-bad-text: #ff7b72;
  --status-bad-border: #ff7b72;
  --status-bad-bg: rgba(255, 123, 114, 0.12);
  --status-neutral-text: var(--text-muted);
  --status-neutral-bg: var(--overlay-soft);
}