/* ===== Cognition Brand Fonts ===== */
@font-face {
  font-family: 'STK Bureau Serif';
  src: url('../fonts/STKBureauSerif-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STK Bureau Serif';
  src: url('../fonts/STKBureauSerif-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NB International Pro';
  src: url('../fonts/NBInternationalPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== 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.
   Cognition brand typography with teal interactive accent. */

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

  /* ----- Surfaces ----- */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-surface-raised: #f5f5f5;
  --color-surface-hover: #efefef;
  --color-border: #eaeaea;
  --color-border-light: #f0f0f0;
  --color-border-hover: #ccc;

  /* ----- Sidebar (dark shell) ----- */
  --color-sidebar-bg: #111113;
  --color-sidebar-text: #b0b4bc;
  --color-sidebar-text-dim: #6b7080;
  --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: #111;
  --color-text-secondary: #555;
  --color-text-muted: #999;

  /* ----- 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: #92400e;
  --color-warning-dim: rgba(245, 158, 11, 0.08);

  --color-info: #0891b2;
  --color-info-dim: rgba(8, 145, 178, 0.10);
  --color-purple: #4f46e5;
  --color-purple-dim: rgba(99, 102, 241, 0.10);

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

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

  /* ----- Type ----- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Menlo', 'Consolas', 'Courier New', monospace;
  --font-heading: 'STK Bureau Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'NB International Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}