/* ============================================================
   Design tokens — Direction 1 "Refined Navy"
   Single source of truth for color / type / space / radius /
   shadow. Components (app.css) and page styles consume these;
   never hardcode a hex that has a token.
   ============================================================ */
:root {
  /* Brand navy scale (existing brand #2c3e6b formalized) */
  --navy-900: #1e2d52;
  --navy-700: #2c3e6b;
  --navy-600: #3a4f85;
  --navy-100: #e8ecf7;
  --navy-50:  #f4f6fc;

  /* Ink */
  --ink:       #1c2333;
  --ink-muted: #55606e;   /* AA on white at any size */

  /* Surfaces */
  --surface:     #ffffff;
  --surface-alt: #f5f6fa;
  --line:        #d9dee8;

  /* Status (AA-checked fg on bg) */
  --ok-bg: #d9efe0;     --ok-fg: #14532d;
  --warn-bg: #fdf0cd;   --warn-fg: #764e00;
  --danger-bg: #fadadd; --danger-fg: #86222c;
  --info-bg: #d7e6fb;   --info-fg: #1e4076;

  --focus-ring: #3a4f85;

  /* Type */
  --font-sans: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-base: 1rem;      /* 16px */
  --fs-sm:   0.875rem;  /* 14px — minimum size for data */
  --fs-lg:   1.125rem;
  --fs-xl:   1.5rem;
  --fs-xxl:  2rem;

  /* Space (4px scale) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 40px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;

  /* Shadow */
  --shadow-1: 0 1px 3px rgba(30, 45, 82, 0.10);
  --shadow-2: 0 6px 20px rgba(30, 45, 82, 0.14);

  /* Layout */
  --content-max: 1400px;

  /* Bootstrap bridge: retheme BS components from the token layer */
  --bs-primary: var(--navy-700);
  --bs-link-color: var(--navy-700);
  --bs-link-hover-color: var(--navy-900);
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface-alt);
}