@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Urbanist:wght@300;400;500;600;700&display=swap");

:root {
  --ax-color-scheme: light;

  --audax-bg: #f4f8fb;
  --audax-panel: #ffffff;
  --audax-panel-2: #f7fafc;
  --audax-panel-3: #edf4f7;
  --audax-border: #d5e1e8;
  --audax-text: #102a3a;
  --audax-muted: #5e7180;
  --audax-accent: #149b68;
  --audax-accent-2: #0b6fb8;
  --audax-accent-rgb: 20, 155, 104;
  --audax-blue: #0b6fb8;
  --audax-blue-rgb: 11, 111, 184;
  --audax-danger: #c83b45;
  --audax-warning: #b87511;
  --audax-success: #149b68;
  --audax-note: #0b6fb8;
  --audax-note-rgb: 11, 111, 184;
  --audax-note-strong: #07558e;
  --audax-note-muted: #416f8f;
  --audax-line-soft: rgba(16, 42, 58, 0.10);
  --audax-line-strong: rgba(20, 155, 104, 0.34);
  --audax-accent-soft: rgba(20, 155, 104, 0.11);
  --audax-warning-soft: rgba(242, 199, 68, 0.12);
  --audax-danger-soft: rgba(255, 77, 77, 0.12);
  --audax-shadow: 0 22px 48px rgba(30, 67, 89, 0.14);
  --audax-shadow-soft: 0 10px 26px rgba(30, 67, 89, 0.10);
  --audax-radius: 8px;
  --font-base: "Urbanist", "Segoe UI", sans-serif;
  --font-title: "Space Grotesk", "Urbanist", sans-serif;

  --bg: var(--audax-bg) !important;
  --bg-dark: var(--audax-bg) !important;
  --panel: var(--audax-panel) !important;
  --panel-2: var(--audax-panel-2) !important;
  --panel-3: var(--audax-panel-3) !important;
  --panel-soft: var(--audax-panel-2) !important;
  --panel-strong: var(--audax-panel-2) !important;
  --card: var(--audax-panel) !important;
  --line: var(--audax-border) !important;
  --line-soft: var(--audax-line-soft) !important;
  --line-strong: var(--audax-line-strong) !important;
  --stroke: var(--audax-border) !important;
  --border: var(--audax-border) !important;
  --text: var(--audax-text) !important;
  --muted: var(--audax-muted) !important;
  --accent: var(--audax-accent) !important;
  --accent-2: var(--audax-accent-2) !important;
  --accent-soft: var(--audax-accent-soft) !important;
  --primary: var(--audax-accent) !important;
  --primary-2: var(--audax-accent-2) !important;
  --ok: var(--audax-accent) !important;
  --success: var(--audax-success) !important;
  --danger: var(--audax-danger) !important;
  --warning: var(--audax-warning) !important;
  --warning-soft: var(--audax-warning-soft) !important;
  --danger-soft: var(--audax-danger-soft) !important;
  --info: var(--audax-note) !important;
  --info-rgb: var(--audax-note-rgb) !important;
  --info-strong: var(--audax-note-strong) !important;
  --info-muted: var(--audax-note-muted) !important;
  --shadow: var(--audax-shadow) !important;
  --shadow-soft: var(--audax-shadow-soft) !important;
  --radius: var(--audax-radius) !important;
}

:root[data-ax-contrast="comfort"] {
  --audax-bg: #eef6f7;
  --audax-muted: #415b6b;
  --audax-border: #bdced8;
  --audax-line-soft: rgba(16, 42, 58, 0.16);
}

:root[data-ax-contrast="high"] {
  --audax-bg: #ffffff;
  --audax-panel: #ffffff;
  --audax-panel-2: #eef4f7;
  --audax-panel-3: #e3edf2;
  --audax-border: #526b7a;
  --audax-text: #00131f;
  --audax-muted: #253f4f;
  --audax-line-soft: rgba(0, 19, 31, 0.28);
  --audax-line-strong: rgba(0, 110, 72, 0.74);
  --audax-shadow: 0 20px 42px rgba(0, 30, 49, 0.18);
  --audax-shadow-soft: 0 10px 24px rgba(0, 30, 49, 0.14);
}

:root[data-ax-contrast="high"] :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--audax-accent) !important;
  outline-offset: 2px !important;
}

html,
body {
  color-scheme: var(--ax-color-scheme, light);
  font-family: var(--font-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
}