:root {
  --gk-bg: #f6f8fb;
  --gk-ink: #0f172a;
  --gk-surface: #ffffff;
  --gk-text: #0f172a;
  --gk-muted: #64748b;
  /* Brand foundation: dark navy from the Graphics King mark, with the
     logo's CMYK accents (cyan / magenta / yellow) used sparingly. */
  --gk-blue: #0ea5e9;
  --gk-purple: #6d28d9;
  --gk-purple-hover: #5b21b6;
  --gk-purple-active: #4c1d95;
  --gk-pink: #ec4899;
  /* Gradient is a brand accent (hairlines, small highlights) — not a page background. */
  --gk-gradient: linear-gradient(135deg, #0ea5e9, #8b5cf6, #ec4899);
  --gk-primary: var(--gk-purple);
  --gk-primary-light: #7c3aed;
  --gk-accent: #0ea5e9;
  --gk-accent-light: #38bdf8;
  --gk-border: #e2e8f0;
  --gk-border-focus: var(--gk-accent);
  --gk-success: #0f7b4a;
  --gk-warning: #b45309;
  --gk-danger: #b42318;
  --gk-radius: 12px;
  --gk-radius-sm: 8px;
  --gk-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --gk-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.07);
  --gk-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.08), 0 16px 36px rgba(15, 23, 42, 0.12);
  --gk-header-h: 72px;
  --gk-teal: var(--gk-blue);
  --gk-magenta: var(--gk-pink);
  --gk-gold: #fbbf24;
  --gk-dark: #1e1b4b;
  --gk-dark-2: #151238;
  --gk-light-bg: var(--gk-bg);
  --gk-card-bg: var(--gk-surface);
  --gk-text-muted: var(--gk-muted);

  /* Bootstrap 5 theme — navy foundation, violet action color */
  --bs-primary: #6d28d9;
  --bs-primary-rgb: 109, 40, 217;
  --bs-secondary: #1e1b4b;
  --bs-secondary-rgb: 30, 27, 75;
  --bs-info: #0ea5e9;
  --bs-info-rgb: 14, 165, 233;
  --bs-warning: #ec4899;
  --bs-warning-rgb: 236, 72, 153;
  --bs-dark: #1e1b4b;
  --bs-dark-rgb: 30, 27, 75;
  --bs-success: #0f7b4a;
  --bs-danger: #b42318;
  --bs-body-bg: #f6f8fb;
  --bs-body-color: #0f172a;
  --bs-border-color: #e2e8f0;
  --bs-link-color: #6d28d9;
  --bs-link-hover-color: #5b21b6;
  --bs-emphasis-color: #0f172a;
}

html,
body {
  background: var(--gk-bg);
  color: var(--gk-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  color: var(--gk-ink);
}

.tabular {
  font-variant-numeric: tabular-nums;
}