/* ═══════════════════════════════════════════════════════════════════════════
   Material — Google
   Warm wit, zacht, verhoogde kaarten, grote radius, schaduw-gebaseerd.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root[data-theme="material"] {
  --wa-font: "Outfit", "Google Sans", Roboto, system-ui, sans-serif;
  --wa-font-mono: "Google Sans Mono", "Roboto Mono", monospace;
  --wa-font-weight: 400; --wa-font-weight-medium: 500; --wa-font-weight-bold: 600;

  --wa-bg: #FEF7FF; --wa-surface: #FFFFFF; --wa-surface-alt: #F3EDF7;
  --wa-surface-hover: #ECE6F0; --wa-surface-pressed: #E1DBE5;
  --wa-border: #E1DBE5; --wa-border-strong: #C9C5CA; --wa-border-subtle: #F3EDF7;

  --wa-text: #1D1B20; --wa-text-secondary: #49454F; --wa-text-muted: #79747E;
  --wa-text-disabled: #B0ABB5; --wa-text-inverse: #FFF;

  --wa-accent: #6750A4; --wa-accent-hover: #5639A0; --wa-accent-subtle: rgba(103,80,164,.08);
  --wa-accent-text: #6750A4;

  --wa-error: #B3261E; --wa-error-bg: #F9DEDC; --wa-error-border: #F2B8B5;
  --wa-warning: #7C5800; --wa-warning-bg: #FFF0C7; --wa-warning-border: #FFD580;
  --wa-success: #1B6D30; --wa-success-bg: #D4EDDA; --wa-success-border: #A3D9B1;
  --wa-info: #0B57D0; --wa-info-bg: #D3E3FD; --wa-info-border: #A8C7FA;

  --wa-radius-xs: 8px; --wa-radius-sm: 12px; --wa-radius: 16px;
  --wa-radius-lg: 20px; --wa-radius-xl: 28px; --wa-radius-full: 9999px;

  --wa-shadow-xs: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12);
  --wa-shadow: 0 2px 6px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08);
  --wa-shadow-lg: 0 6px 16px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --wa-shadow-xl: 0 12px 32px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);

  --wa-overlay: rgba(0,0,0,.5);

  --wa-badge-blue-bg: #D3E3FD; --wa-badge-blue-text: #0B57D0; --wa-badge-blue-border: #A8C7FA;
  --wa-badge-purple-bg: #EADDFF; --wa-badge-purple-text: #6750A4; --wa-badge-purple-border: #D0BCFF;
  --wa-badge-orange-bg: #FFF0C7; --wa-badge-orange-text: #7C5800; --wa-badge-orange-border: #FFD580;
  --wa-badge-green-bg: #D4EDDA; --wa-badge-green-text: #1B6D30; --wa-badge-green-border: #A3D9B1;
  --wa-badge-red-bg: #F9DEDC; --wa-badge-red-text: #B3261E; --wa-badge-red-border: #F2B8B5;
  --wa-badge-cyan-bg: #C2E7FF; --wa-badge-cyan-text: #004A77; --wa-badge-cyan-border: #7FCFFF;
  --wa-badge-violet-bg: #EADDFF; --wa-badge-violet-text: #6750A4; --wa-badge-violet-border: #D0BCFF;
  --wa-badge-teal-bg: #D4EDDA; --wa-badge-teal-text: #1B6D30; --wa-badge-teal-border: #A3D9B1;

  --wa-score-a: #1B6D30; --wa-score-a-bg: #D4EDDA;
  --wa-score-b: #34A853; --wa-score-b-bg: #D4EDDA;
  --wa-score-c: #7C5800; --wa-score-c-bg: #FFF0C7;
  --wa-score-d: #C54B22; --wa-score-d-bg: #F9DEDC;
  --wa-score-e: #B3261E; --wa-score-e-bg: #F9DEDC;

  --wa-stage1-bg: #D3E3FD; --wa-stage1-text: #0B57D0;
  --wa-stage2-bg: #EADDFF; --wa-stage2-text: #6750A4;
  --wa-stage3-bg: #D4EDDA; --wa-stage3-text: #1B6D30;

  --wa-btn-bg: #6750A4; --wa-btn-hover: #5639A0; --wa-btn-text: #FFF;
  --wa-btn-disabled: #E1DBE5; --wa-btn-disabled-text: #B0ABB5;

  --wa-input-bg: #FFF; --wa-input-border: #C9C5CA;
  --wa-input-focus: #6750A4; --wa-input-focus-shadow: rgba(103,80,164,.18);
}