:root {
  /* The Crusade design tokens, phase 1 (generated by make_brand_phase1.py) */
  /* colour */
  --color-bg: #080A10;
  --color-shield: #0C0D11;
  --color-surface-1: #12141A;
  --color-surface-2: #1A1D24;
  --color-surface-3: #23262E;
  --color-hairline: #2A2D35;
  --color-border: #3A3E47;
  --color-text-primary: #F4EEDF;
  --color-text-secondary: #B8AF9D;
  --color-text-tertiary: #8E8778;
  --color-gold: #D9B45A;
  --color-gold-light: #F2D88E;
  --color-gold-pressed: #B8892E;
  --color-gold-hairline: #5C4A26;
  --color-on-gold: #080A10;
  --color-oxblood: #6E1420;
  --color-oxblood-light: #C95A64;
  --color-success: #7DB88A;
  --color-warning: #E3AE52;
  --color-error: #E0756A;
  --color-season-violet: #7A5CA8;
  --color-season-rose: #C98AA0;
  --color-season-green: #3B7350;
  --color-season-white: #F4EEDF;
  --color-season-red: #A8303A;

  /* font families */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-prayer: 'Lora', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* type scale (mobile) */
  --type-display-family: var(--font-display);
  --type-display-size: 34px;
  --type-display-weight: 600;
  --type-display-line-height: 40px;
  --type-display-letter-spacing: 0.06em;
  --type-title-family: var(--font-display);
  --type-title-size: 26px;
  --type-title-weight: 500;
  --type-title-line-height: 32px;
  --type-title-letter-spacing: 0.05em;
  --type-heading-family: var(--font-ui);
  --type-heading-size: 20px;
  --type-heading-weight: 600;
  --type-heading-line-height: 26px;
  --type-heading-letter-spacing: -0.005em;
  --type-body-family: var(--font-ui);
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-line-height: 24px;
  --type-body-letter-spacing: 0em;
  --type-prayer-body-family: var(--font-prayer);
  --type-prayer-body-size: 19px;
  --type-prayer-body-weight: 400;
  --type-prayer-body-line-height: 30px;
  --type-prayer-body-letter-spacing: 0.005em;
  --type-caption-family: var(--font-ui);
  --type-caption-size: 13px;
  --type-caption-weight: 500;
  --type-caption-line-height: 18px;
  --type-caption-letter-spacing: 0.01em;
  --type-overline-family: var(--font-display);
  --type-overline-size: 12px;
  --type-overline-weight: 600;
  --type-overline-line-height: 16px;
  --type-overline-letter-spacing: 0.16em;
}

/* convenience classes */
.type-display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line-height);
  letter-spacing: var(--type-display-letter-spacing);
}
.type-title {
  font-family: var(--type-title-family);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line-height);
  letter-spacing: var(--type-title-letter-spacing);
}
.type-heading {
  font-family: var(--type-heading-family);
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line-height);
  letter-spacing: var(--type-heading-letter-spacing);
}
.type-body {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
}
.type-prayer-body {
  font-family: var(--type-prayer-body-family);
  font-size: var(--type-prayer-body-size);
  font-weight: var(--type-prayer-body-weight);
  line-height: var(--type-prayer-body-line-height);
  letter-spacing: var(--type-prayer-body-letter-spacing);
}
.type-caption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
}
.type-overline {
  font-family: var(--type-overline-family);
  font-size: var(--type-overline-size);
  font-weight: var(--type-overline-weight);
  line-height: var(--type-overline-line-height);
  letter-spacing: var(--type-overline-letter-spacing);
  text-transform: uppercase;
}