/*
 * Design tokens for the pf-* component library.
 *
 * These are plain CSS custom properties, not framework-specific, so any page
 * (this app or another project) gets a themeable baseline just by linking
 * this file. An app can override any subset of these on :root (or on
 * [data-theme="..."]) before or after loading this file -- the cascade wins
 * either way since these are declared on :root here too.
 */

:root {
  /* Brand colors -- override these per-institution/per-product */
  --pf-color-primary: #667eea;
  --pf-color-primary-dark: #764ba2;
  --pf-color-accent: #4f46e5;
  --pf-color-accent-dark: #3730a3;
  --pf-color-accent-light: #eef2ff;
  /* Text drawn on top of --pf-color-accent-light (badges, hover chips, the
     prerequisites box) -- a distinct token from --pf-color-accent-dark
     because that one doubles as a solid *background* with white text on top
     (button hover states) and needs to stay dark in both themes for
     contrast, while this one needs to go light in dark mode since its
     background does. Same value as --pf-color-accent-dark in light mode. */
  --pf-color-accent-light-text: #3730a3;

  /* Surface + text */
  --pf-color-background: #f7f8fa;
  --pf-color-surface: #ffffff;
  --pf-color-surface-muted: #f5f7fa;
  --pf-color-text: #1f2937;
  --pf-color-text-muted: #6b7280;
  --pf-color-text-secondary: #334155;
  --pf-color-border: #e5e7eb;
  --pf-color-divider: #cbd5e1;

  /* Semantic colors */
  --pf-color-success: #22c55e;
  --pf-color-success-bg: #dcfce7;
  --pf-color-success-text: #166534;
  --pf-color-danger: #d32f2f;
  --pf-color-danger-bg: #ffebee;
  --pf-color-danger-text: #7f1d1d;
  --pf-color-warning: #f97316;
  --pf-color-warning-bg: #fff7ed;
  --pf-color-warning-text: #9a3412;
  --pf-color-flag-bg: #fff3cd;
  --pf-color-flag-text: #856404;
  --pf-color-flag-border: #ffc107;

  /* Typography */
  --pf-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --pf-font-family-heading: Georgia, 'Times New Roman', serif;
  --pf-font-size-sm: 0.85em;
  --pf-font-size-base: 1em;
  --pf-font-size-lg: 1.2em;

  /* Spacing scale (4px base) */
  --pf-space-1: 4px;
  --pf-space-2: 8px;
  --pf-space-3: 12px;
  --pf-space-4: 16px;
  --pf-space-5: 24px;
  --pf-space-6: 32px;
  --pf-space-7: 48px;
  --pf-space-8: 64px;

  /* Radius scale */
  --pf-radius-sm: 5px;
  --pf-radius-md: 8px;
  --pf-radius-lg: 14px;
  --pf-radius-full: 999px;

  /* Shadows */
  --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --pf-shadow-md: 0 5px 15px rgba(0, 0, 0, 0.12);
  --pf-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);

  /* Motion */
  --pf-transition-fast: 0.15s ease;
  --pf-transition-base: 0.2s ease;
  --pf-transition-slow: 0.3s ease;
}

/* Dark theme overrides. Toggled by setting data-theme="dark" on <html> --
   see pf-theme-toggle / the app's setDarkMode(). */
:root[data-theme='dark'] {
  --pf-color-accent-light: rgba(129, 140, 248, 0.16);
  --pf-color-accent-light-text: #c7d2fe;
  --pf-color-background: #14161c;
  --pf-color-surface: #1f222b;
  --pf-color-surface-muted: #262b36;
  --pf-color-text: #e5e7eb;
  --pf-color-text-muted: #9ca3af;
  --pf-color-text-secondary: #cbd5e1;
  --pf-color-border: #333744;
  --pf-color-divider: #3f4454;
  --pf-color-success: #4ade80;
  --pf-color-success-bg: rgba(34, 197, 94, 0.16);
  --pf-color-success-text: #86efac;
  --pf-color-danger: #f87171;
  --pf-color-danger-bg: rgba(239, 68, 68, 0.16);
  --pf-color-danger-text: #fca5a5;
  --pf-color-warning: #fb923c;
  --pf-color-warning-bg: rgba(249, 115, 22, 0.16);
  --pf-color-warning-text: #fdba74;
  --pf-color-flag-bg: rgba(250, 204, 21, 0.18);
  --pf-color-flag-text: #fde68a;
  --pf-color-flag-border: #eab308;
}

body {
  font-family: var(--pf-font-family);
  background: var(--pf-color-background);
  color: var(--pf-color-text);
  transition: background-color var(--pf-transition-base), color var(--pf-transition-base);
}

h1, h2, h3 {
  font-family: var(--pf-font-family-heading);
}