/* =============================================================================
   FONTS
   ============================================================================= */

/* Merriweather Font */
@font-face {
  font-display: swap;
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/merriweather-v33-latin-300.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/merriweather-v33-latin-300italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/merriweather-v33-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/merriweather-v33-latin-700italic.woff2") format("woff2");
}

/* Inter Font */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-italic.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700italic.woff2") format("woff2");
}

/* OpenDyslexic Font */
@font-face {
  font-family: "OpenDyslexic";
  src:
    url("../fonts/OpenDyslexic-Regular.woff2") format("woff2"),
    url("../fonts/OpenDyslexic-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src:
    url("../fonts/OpenDyslexic-Bold.woff2") format("woff2"),
    url("../fonts/OpenDyslexic-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src:
    url("../fonts/OpenDyslexic-Italic.woff2") format("woff2"),
    url("../fonts/OpenDyslexic-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* Material Icons Font */
/* Material Icons - for tone indicators */
@font-face {
  font-display: swap;
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons-v145-latin-regular.woff2") format("woff2");
}

/* Material Icons Outlined - for navigation */
@font-face {
  font-display: swap;
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/material-icons-outlined-v110-latin-regular.woff2")
    format("woff2");
}

.material-icons,
.material-icons-outlined {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

/* Hide icon text until font loads */
.material-icons,
.material-icons-outlined {
  overflow: hidden;
  width: 1em;
  height: 1em;
}

/* Settings tabs need slightly larger icons */
.settings-tab .material-icons-outlined {
  width: 1.4rem;
  height: 1.4rem;
}

.material-icons {
  font-family: "Material Icons";
}

.material-icons-outlined {
  font-family: "Material Icons Outlined";
}

/* =============================================================================
   CUSTOMIZATION VARIABLES
   ============================================================================= */

:root {
  --container-bg-opacity: 98%;

  /* === FONTS === */
  --font-serif: "Merriweather", Georgia, "Times New Roman", Times, serif;
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-dyslexic: "OpenDyslexic", Arial, sans-serif;
  --font-heading: "Merriweather", Georgia, "Times New Roman", Times, serif;
  --font-monospace:
    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New",
    monospace;

  /* === CURRENT FONT (DO NOT EDIT - can be overridden by settings) === */
  --font-main: var(--font-serif);

  /* Use standard font weights for compatibility */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* === FONT SIZES === */
  --text-size-base: 13pt;
  --text-size-small: 8pt;
  --text-size-medium: 9pt;
  --text-size-large: 15pt;
  --text-size-xl: 16pt;
  --text-size-xxl: 18pt;
  --text-size-title: 30pt;
  --text-size-title-smaller: 20pt;
  --text-size-subtitle: 14pt;
  --text-size-tiny: 11pt;

  /* === SPACING === */
  --spacing-xs: 3px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-xxl: 15px;
  --spacing-huge: 30px;
  --spacing-massive: 60px;

  /* === LAYOUT === */
  --content-max-width: 700px;
  --nav-height-desktop: 60px;
  --nav-height-mobile: 115px;
  --border-radius: 3px;
  --border-radius-lg: 8px;

  /* === TRANSITIONS === */
  --transition-fast: 0.1s;
  --transition-medium: 0.2s;
  --transition-slow: 0.6s;
  --transition-very-slow: 2s;

  /* === LINE HEIGHTS === */
  --line-height-heading: 1.2em;
  --line-height-text: 1.7em;
  --line-height-choice: 1.7em;
  --line-height-list: 1.6em;
  --line-height-tight: 1;

  /* === STAT BARS === */
  --stat-bar-height: 10px;
  --stat-bar-border-radius: 5px;
}
