/* ============================================================
   KOS v5 — Design Tokens
   Shared across every page of the authenticated app shell.
   (login.html intentionally keeps its own local tokens — not
   touched in this phase.)
   ============================================================ */

:root {
  /* Color */
  --color-bg: #f2f2f0;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #dad9d3;
  --color-border-strong: #b8b6ad;
  --color-text: #16150f;
  --color-text-muted: #5c5a52;
  --color-text-subtle: #8a8880;
  --color-accent: #17352a;
  --color-accent-hover: #0f271e;
  --color-accent-soft: #e2ebe6;
  --color-danger: #7a251e;
  --color-danger-soft: #f7e6e4;
  --color-success: #1e5730;
  --color-success-soft: #e3efe6;
  --color-warning: #7a5410;
  --color-warning-soft: #f3ead9;
  --color-neutral-soft: #e9e8e4;
  --color-on-accent: #ffffff;
  --color-sidebar-bg: #121412;
  --color-sidebar-surface: #1a1d1a;
  --color-sidebar-text: #cfcdc6;
  --color-sidebar-text-muted: #6e6c65;
  --color-sidebar-active-bg: rgba(255, 255, 255, 0.06);
  --color-sidebar-border: rgba(255, 255, 255, 0.07);

  /* Surface hierarchy (base -> raised -> card -> interactive -> selected) */
  --surface-base: var(--color-bg);
  --surface-raised: #f8f8f6;
  --surface-card: var(--color-surface);
  --surface-interactive: #fbfbfa;
  --surface-selected: var(--color-accent-soft);

  /* KOS semantic accent palette (also used by Dashboard) */
  --accent-blue: #1d5a99;      --accent-blue-soft: #dce9f6;
  --accent-purple: #6b3fa0;    --accent-purple-soft: #ece2f6;
  --accent-green: #1e7a45;     --accent-green-soft: #dcf0e3;
  --accent-teal: #147a75;      --accent-teal-soft: #d9f0ee;
  --accent-orange: #b3591a;    --accent-orange-soft: #f8e4d3;
  --accent-amber: #a3720f;     --accent-amber-soft: #f7ecd4;
  --accent-red: #b3352a;       --accent-red-soft: #f8ddd9;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 11px;
  --font-size-sm: 12.5px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;
  --letter-spacing-label: 0.06em;

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

  /* Layout */
  --sidebar-width: 224px;
  --header-height: 60px;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(10, 10, 8, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 10, 8, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 10, 8, 0.10);
}