/* ============================================================
   KYWHO design system — shared tokens
   Professional corporate-intelligence tone: light, clear, quiet.
   Single sans-serif family (Inter). No dark "startup" theme.
   ============================================================ */

:root{
  /* Surfaces */
  --bg: #fbfaf8;              /* warm off-white, main background */
  --surface: #ffffff;         /* cards, panels */
  --surface-alt: #f1f3f6;     /* blue-grey secondary surface */
  --border: #e2e5ea;

  /* Text */
  --text: #10182b;            /* very dark navy — primary text */
  --text-dim: #5b6472;        /* business grey — secondary text */
  --text-faint: #8891a0;

  /* Institutional color */
  --navy: #102745;            /* deep institutional blue */
  --navy-dark: #0b1c33;
  --accent: #14665c;          /* discreet teal accent */
  --accent-bright: #1c8577;

  /* Semantic (used sparingly, only where meaningful) */
  --ok: #1c7a52;
  --warn: #a86a1e;
  --risk: #a8321e;
  --warn-bg: #fbf3e6;
  --risk-bg: #fbecea;
  --ok-bg: #eaf5ee;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing scale */
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-2xl: 88px;

  /* Radius — restrained, not the rounded-everything look */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadow — used sparingly, one depth only */
  --shadow-sm: 0 1px 2px rgba(16, 24, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 43, 0.08);

  /* Breakpoints (referenced in comments; media queries hardcode these) */
  --bp-tablet: 900px;
  --bp-mobile: 640px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); }