@font-face {
  font-family: 'Oswald-Bold';
  src: url('/api/custom-font/heading') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'JosefinSans-Regular';
  src: url('/api/custom-font/body') format('truetype');
  font-display: swap;
}

:root {
  --accent: #e47e3a;
  --ground: #f0f6f6;
  --surface:  #ddeaea;
  --surface2: #ddeaea;
  --text: #123030;
  --border: #448888;
  --font-heading: 'Oswald-Bold', system-ui, serif;
  --font-body: 'JosefinSans-Regular', system-ui, sans-serif;
  --header-height: 96px;
  --mod-accent: #d97706;
  --mod-accent-dim:   color-mix(in srgb, #d97706 15%, transparent);
  --mod-accent-hover: color-mix(in srgb, #d97706 80%, #000);
  --mod-nav-bg: #ddeaea;
  --mod-nav-text: #eae5db;
  --mod-main-bg: #f0f6f6;
  --mod-nav-font-color: #123030;
  --mod-main-font-color: #123030;
}

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

body, input, textarea, select, button {
  font-family: var(--font-body);
}

.module-page .sidebar, .module-page .module-nav-item {
  color: var(--mod-nav-font-color);
}

.module-page .main, .module-page .reading-content {
  color: var(--mod-main-font-color);
}

.dashboard-page {
  --ground: #f0f6f6;
  --surface: #ddeaea;
  --surface2: #ddeaea;
  --text: #123030;
  --accent: #d97706;
  --border: #2a2a2a;
}
.dashboard-page { background: var(--ground); }
.dashboard-page .header { background: #ddeaea; }