/*
 * Reify Design Tokens
 *
 * Single source of truth for visual identity. All values match the EXISTING
 * palette as-shipped — adopting tokens must produce ZERO visual change.
 *
 * Usage:  color: var(--color-primary);
 *         border-radius: var(--radius-md);
 *
 * Convention: all NEW and REFACTORED UI code uses var(--token) instead of
 * hardcoded hex values. See CLAUDE.md "Design Tokens" section.
 */

:root {
  /* ── Brand / Semantic Colors ──────────────────────────────────────── */
  --color-primary:     #0d6efd;  /* Bootstrap 5 primary — buttons, links, active states */
  --color-secondary:   #6c757d;  /* muted/secondary elements, badges, borders */
  --color-accent:      #6b5ce7;  /* purple accent — NobleUI's sidebar/brand color */
  --color-accent-blue: #4e73df;  /* blue accent — cards, project colors */
  --color-accent-teal: #2e86ab;  /* teal accent — nav drawer active, breadcrumb links */

  /* ── State Colors ─────────────────────────────────────────────────── */
  --color-success:     #198754;
  --color-warning:     #ffc107;
  --color-danger:      #dc3545;
  --color-info:        #0dcaf0;

  /* ── Neutral Palette ──────────────────────────────────────────────── */
  --color-white:       #fff;
  --color-bg:          #f8f9fa;  /* page background, light cards */
  --color-surface:     #fff;     /* card/modal/drawer surface */
  --color-border:      #dee2e6;  /* default border, dividers */
  --color-border-light:#e9ecef;  /* subtle borders, input borders */
  --color-muted:       #adb5bd;  /* muted text, placeholders */
  --color-text:        #212529;  /* primary text */
  --color-text-secondary: #6c757d; /* secondary text */
  --color-text-muted:  #6b7280;  /* dimmed text, captions */

  /* ── Dark-mode neutrals (used by nav-drawer, dark sections) ─────── */
  --color-dark-bg:     #1a1a2e;
  --color-dark-surface:#1e1e2e;
  --color-dark-border: #2d2d44;
  --color-dark-text:   #ccd;
  --color-dark-muted:  #8b8fa3;

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-family:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs:      0.7rem;    /* 11.2px at 16px base */
  --font-size-sm:      0.8rem;    /* 12.8px */
  --font-size-base:    0.875rem;  /* 14px — Bootstrap 5 default body */
  --font-size-md:      1rem;      /* 16px */
  --font-size-lg:      1.125rem;  /* 18px */
  --font-size-xl:      1.25rem;   /* 20px */
  --line-height:       1.5;

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

  /* ── Border Radius ────────────────────────────────────────────────── */
  --radius-sm:         4px;   /* small elements: badges, chips */
  --radius-md:         6px;   /* buttons, inputs, cards */
  --radius-lg:         8px;   /* modals, panels */
  --radius-xl:         12px;  /* large cards, drawers */
  --radius-full:       50%;   /* circles, avatars */

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:         0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg:         0 4px 24px rgba(0, 0, 0, 0.18);
}