/* ===== Field Kit — Shared Design Tokens =====
   Single source of truth for colors, type, radius, and shadows.
   Imported by every page before its page-specific stylesheet so the
   catalog, detail views, and Foundations course share one design system.
   Token values are derived from the Foundations (Secureframe-inspired) UI. */

:root {
  /* ----- Layout ----- */
  --sidebar-w: 320px;
  --topbar-h: 48px;

  /* ----- Surfaces ----- */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f3f5;
  --color-surface-hover: #e9ecef;
  --color-border: #e2e5ea;
  --color-border-light: #edf0f3;
  --color-border-hover: #ced4da;

  /* ----- Sidebar (dark shell) ----- */
  --color-sidebar-bg: #1a1d23;
  --color-sidebar-text: #c4c8cf;
  --color-sidebar-text-dim: #7a7f89;
  --color-sidebar-active-bg: rgba(255,255,255,0.08);
  --color-sidebar-active-text: #ffffff;
  --color-sidebar-hover-bg: rgba(255,255,255,0.05);
  --color-sidebar-group: #8b919a;

  /* ----- Text ----- */
  --color-text: #1a1d23;
  --color-text-secondary: #4a5060;
  --color-text-muted: #8b919a;

  /* ----- Brand / interactive (teal) ----- */
  --color-primary: #0d9488;
  --color-primary-light: #14b8a6;
  --color-primary-dim: rgba(13, 148, 136, 0.10);
  --color-primary-surface: rgba(13, 148, 136, 0.06);
  --color-primary-subtle: rgba(13, 148, 136, 0.08);

  /* The catalog stylesheet uses --color-accent as its interactive text/link
     color. It is a darker teal than the brand --color-primary so accent text
     meets WCAG AA (>=4.5:1) on light surfaces; --color-primary remains the
     brand fill/accent. The dim tint stays brand-teal for backgrounds. */
  --color-accent: #0f766e;
  --color-accent-dim: var(--color-primary-dim);

  /* ----- Status ----- */
  --color-success: #10b981;
  --color-success-dim: rgba(16, 185, 129, 0.10);
  --color-success-surface: rgba(16, 185, 129, 0.06);

  --color-danger: #ef4444;
  --color-danger-dim: rgba(239, 68, 68, 0.10);

  --color-warning: #b45309;
  --color-warning-dim: rgba(245, 158, 11, 0.12);

  /* Category hues kept distinct from the teal brand color so color carries
     consistent meaning: depth = cyan, partner/audience = indigo. */
  --color-info: #0891b2;
  --color-info-dim: rgba(8, 145, 178, 0.12);
  --color-purple: #4f46e5;
  --color-purple-dim: rgba(99, 102, 241, 0.12);

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

  /* ----- Shadow ----- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  /* ----- Type ----- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Menlo', 'Consolas', 'Courier New', monospace;
}