/**
 * Veritas Resource Group — Design Tokens
 * Import in apps: @import "./assets/tokens.css";
 */

:root {
  /* Brand colors */
  --vrg-navy: #0b2540;
  --vrg-teal: #1a6b7c;
  --vrg-cyan: #2db8c4;
  --vrg-gold: #c4a35a;
  --vrg-white: #ffffff;
  --vrg-mist: #f4f7f9;
  --vrg-ink: #3d4f5f;
  --vrg-graphite: #6b7c8a;
  --vrg-border: #e2e8ed;

  /* Semantic */
  --vrg-success: #1f7a54;
  --vrg-warning: #b8860b;
  --vrg-error: #b33a3a;

  /* Typography */
  --vrg-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --vrg-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --vrg-text-display: 2.5rem;
  --vrg-text-h1: 2rem;
  --vrg-text-h2: 1.5rem;
  --vrg-text-h3: 1.25rem;
  --vrg-text-body: 1rem;
  --vrg-text-small: 0.875rem;
  --vrg-text-metric: 1.75rem;

  --vrg-leading-tight: 1.2;
  --vrg-leading-normal: 1.6;

  /* Spacing */
  --vrg-space-xs: 0.25rem;
  --vrg-space-sm: 0.5rem;
  --vrg-space-md: 1rem;
  --vrg-space-lg: 1.5rem;
  --vrg-space-xl: 2rem;
  --vrg-space-2xl: 3rem;

  /* Radius & shadow */
  --vrg-radius: 6px;
  --vrg-radius-lg: 12px;
  --vrg-shadow: 0 4px 24px rgba(11, 37, 64, 0.08);
  --vrg-shadow-lg: 0 8px 40px rgba(11, 37, 64, 0.12);

  /* Layout */
  --vrg-max-width: 1140px;
}

/* Base document styles (optional) */
.vrg-body {
  font-family: var(--vrg-font-body);
  font-size: var(--vrg-text-body);
  line-height: var(--vrg-leading-normal);
  color: var(--vrg-ink);
  background-color: var(--vrg-mist);
}

.vrg-heading {
  font-family: var(--vrg-font-display);
  color: var(--vrg-navy);
  font-weight: 600;
  line-height: var(--vrg-leading-tight);
}

.vrg-btn-primary {
  display: inline-block;
  font-family: var(--vrg-font-body);
  font-weight: 600;
  font-size: var(--vrg-text-body);
  padding: 12px 24px;
  border-radius: var(--vrg-radius);
  background: var(--vrg-teal);
  color: var(--vrg-white);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.vrg-btn-primary:hover {
  background: var(--vrg-navy);
}

.vrg-btn-secondary {
  display: inline-block;
  font-family: var(--vrg-font-body);
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--vrg-radius);
  background: transparent;
  color: var(--vrg-navy);
  border: 2px solid var(--vrg-navy);
  cursor: pointer;
  text-decoration: none;
}

.vrg-card {
  background: var(--vrg-white);
  border: 1px solid var(--vrg-border);
  border-radius: var(--vrg-radius-lg);
  box-shadow: var(--vrg-shadow);
  padding: var(--vrg-space-xl);
}

.vrg-metric {
  font-family: var(--vrg-font-body);
  font-size: var(--vrg-text-metric);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--vrg-cyan);
}

.vrg-accent-gold {
  color: var(--vrg-gold);
}