/* Tulirelv.ee disainitokenid (Material Design 3 põhimõtted). Ainus värvide ja vahede allikas. */
:root {
  /* Värvirollid */
  --md-primary: #1F5C5A;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #CFE8E5;
  --md-on-primary-container: #0B2E2D;
  --md-secondary: #4A6362;
  --md-on-secondary: #FFFFFF;
  --md-accent: #B4531F;          /* mõõdukas aktsent, kasutada vähe */
  --md-on-accent: #FFFFFF;
  --md-surface: #FAFCFB;
  --md-surface-container: #EEF3F2;
  --md-on-surface: #171D1D;
  --md-on-surface-variant: #3F4948;
  --md-outline: #6F7978;
  --md-outline-variant: #C0C9C8;
  --md-error: #B3261E;
  --md-error-container: #FCEEEE;
  --md-on-error: #FFFFFF;
  --md-warning-container: #FFF1D6;
  --md-on-warning-container: #4A3200;
  --md-focus: #0B57D0;

  /* Tüpograafia */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-display: 2.5rem/1.15 var(--font-sans);
  --text-headline: 1.75rem/1.25 var(--font-sans);
  --text-title: 1.25rem/1.35 var(--font-sans);
  --text-body: 1rem/1.6 var(--font-sans);
  --text-label: 0.875rem/1.4 var(--font-sans);

  /* Vahed (4px alus) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;

  /* Kujud ja varjud */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
  --elev-1: 0 1px 2px rgb(0 0 0 / .12), 0 1px 3px 1px rgb(0 0 0 / .08);
  --elev-2: 0 1px 2px rgb(0 0 0 / .12), 0 2px 6px 2px rgb(0 0 0 / .08);

  --target-min: 44px;            /* minimaalne puutesihtmärk (WCAG 2.2 AA: 24px, siin rangem) */
}

*:focus-visible { outline: 3px solid var(--md-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Komponendid */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min);
  padding: 0 var(--space-6); border: 0; border-radius: var(--radius-full); font: var(--text-label);
  font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.btn-outlined { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline); }
.card { background: var(--md-surface-container); border-radius: var(--radius-md); padding: var(--space-6); }
.notice { background: var(--md-warning-container); color: var(--md-on-warning-container);
  border-left: 4px solid var(--md-accent); border-radius: var(--radius-sm); padding: var(--space-4); }
.field label { display: block; font: var(--text-label); font-weight: 600; margin-bottom: var(--space-1); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--md-outline); border-radius: var(--radius-sm); font: var(--text-body);
  background: var(--md-surface); color: var(--md-on-surface); }
.field .error { color: var(--md-error); font: var(--text-label); margin-top: var(--space-1); }
body { margin: 0; background: var(--md-surface); color: var(--md-on-surface); font: var(--text-body); }