@import "tailwindcss";

:root {
  --primary: #004cca;
  --primary-container: #0062ff;
  --on-primary: #ffffff;
  --on-primary-fixed: #00174b;
  --primary-fixed: #dbe1ff;
  --primary-fixed-dim: #b4c5ff;
  --inverse-primary: #b4c5ff;

  --secondary: #495f84;
  --on-secondary: #ffffff;
  --secondary-container: #bcd2fe;
  --on-secondary-container: #445a7f;

  --tertiary: #005f75;
  --on-tertiary: #ffffff;
  --tertiary-container: #007995;
  --on-tertiary-container: #e3f6ff;

  --surface: #f7f9fb;
  --surface-dim: #d8dadc;
  --surface-bright: #f7f9fb;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container: #eceef0;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --on-surface: #191c1e;
  --on-surface-variant: #424656;

  --outline: #737687;
  --outline-variant: #c2c6d9;

  --inverse-surface: #2d3133;
  --inverse-on-surface: #eff1f3;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;

  --background: #f7f9fb;
  --on-background: #191c1e;
}

@theme inline {
  --color-primary: var(--primary);
  --color-primary-container: var(--primary-container);
  --color-on-primary: var(--on-primary);
  --color-on-primary-fixed: var(--on-primary-fixed);
  --color-primary-fixed: var(--primary-fixed);
  --color-primary-fixed-dim: var(--primary-fixed-dim);
  --color-inverse-primary: var(--inverse-primary);

  --color-secondary: var(--secondary);
  --color-on-secondary: var(--on-secondary);
  --color-secondary-container: var(--secondary-container);
  --color-on-secondary-container: var(--on-secondary-container);

  --color-tertiary: var(--tertiary);
  --color-on-tertiary: var(--on-tertiary);
  --color-tertiary-container: var(--tertiary-container);
  --color-on-tertiary-container: var(--on-tertiary-container);

  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-bright: var(--surface-bright);
  --color-surface-container-lowest: var(--surface-container-lowest);
  --color-surface-container-low: var(--surface-container-low);
  --color-surface-container: var(--surface-container);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-container-highest: var(--surface-container-highest);
  --color-on-surface: var(--on-surface);
  --color-on-surface-variant: var(--on-surface-variant);

  --color-outline: var(--outline);
  --color-outline-variant: var(--outline-variant);

  --color-inverse-surface: var(--inverse-surface);
  --color-inverse-on-surface: var(--inverse-on-surface);

  --color-error: var(--error);
  --color-on-error: var(--on-error);
  --color-error-container: var(--error-container);

  --color-background: var(--background);
  --color-on-background: var(--on-background);

  --font-headline: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}