@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ExamUp Australia theme: Red Pen. Every widget reads these (principle 14). */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F1EE;
  --text: #111111;
  --muted: #555555;
  --border: #1A1A1A;
  --accent: #D42A1A;
  --on-accent: #FFFFFF;
  --accent-2: #1D3BFF;
  --accent-3: #FFD400;
  --accent-4: #111111;
  --danger: #B3140A;
  --radius: 2px;
  --radius-small: 2px;
  --space: 30px;
  --shadow: 4px 4px 0 #111111;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Archivo", "Public Sans", system-ui, sans-serif;
  --heading-weight: 900;
  --page-width: 100%;
  --frame-width: 100%;
  --button-size: 1rem;
  --button-weight: 700;
  /* text on the yellow accent: dark in both light and dark mode */
  --on-yellow: #111111;
  /* a highlighted word: a yellow bar under dark ink in light; in dark, yellow ink with no bar (white on yellow was glaring) */
  --hl-bar: #FFD400;
  --hl-ink: inherit;
  color-scheme: light;
}

@media (max-width: 900px) {
  :root {
    --space: 24px;
    --page-width: 100%;
    --frame-width: 100%;
  }
}

@media (max-width: 600px) {
  :root {
    --space: 16px;
    --radius: 2px;
    --page-width: 100%;
    --frame-width: 100%;
    --button-size: 0.95rem;
    --shadow: 3px 3px 0 #111111;
  }
}

/* Dark: chosen on the site (the header's sun/moon button: html[data-theme], kept on the device), or the device's own
   setting when nothing was chosen there. */
:root[data-theme="dark"] {
    --bg: #0E0E0E;
    --surface: #161616;
    --surface-2: #222222;
    --text: #F5F5F0;
    --muted: #B0B0AA;
    --border: #5A5A55;
    --accent: #FF5A47;
    --on-accent: #0E0E0E;
    --accent-2: #7F93FF;
    --accent-3: #FFD400;
    --accent-4: #F5F5F0;
    --danger: #FF7A6B;
    --shadow: 4px 4px 0 rgba(245, 245, 240, 0.22);
    --hl-bar: transparent;
    --hl-ink: #FFD400;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E0E0E;
    --surface: #161616;
    --surface-2: #222222;
    --text: #F5F5F0;
    --muted: #B0B0AA;
    --border: #5A5A55;
    --accent: #FF5A47;
    --on-accent: #0E0E0E;
    --accent-2: #7F93FF;
    --accent-3: #FFD400;
    --accent-4: #F5F5F0;
    --danger: #FF7A6B;
    --shadow: 4px 4px 0 rgba(245, 245, 240, 0.22);
    --hl-bar: transparent;
    --hl-ink: #FFD400;
    color-scheme: dark;
  }
}