/* Design tokens - test-design branch */
:root {
  /* Colors */
  --color-primary: #1D406A;
  --color-primary-strong: #0C477B; /* existing surface */
  --color-accent: #277DA8;
  --color-accent-gold: #C4AE5C;
  --color-surface: rgba(12, 71, 123, 0.90);
  --color-surface-plain: #0C477B;
  --color-text-on-surface: #C4AE5C;
  --color-text-neutral: #EAE6D2;
  --color-divider: rgba(196, 174, 92, 0.35);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Radii */
  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 12px;

  /* Typography */
  --font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --font-size-title: 22px;
  --font-size-subtitle: 18px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.15);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.20);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med: 250ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: rgba(12, 71, 123, 0.90);
    --color-text-neutral: #F2EDD6;
    --color-divider: rgba(196, 174, 92, 0.45);
  }
}