/* Shared design tokens for microlearning.painapple.nl (PAI-207).
 *
 * Mirrors site/static/css/main.css's :root block, per docs/design-system.md's
 * "Foundations" section - this service can't literally @import that
 * stylesheet (separate build pipeline, no shared static-asset mechanism),
 * so it mirrors the values as its own literals, same convention
 * apps/router.py already follows for its Streamlit CSS injection. If a
 * token's value ever changes there, update it here too - this file doesn't
 * redefine the system, it re-declares it for this service's own pipeline.
 *
 * This is the "shared partial/CSS include" PAI-207 asked for: one file,
 * linked via <link rel="stylesheet"> from every HTML surface this service
 * renders (page_shell() in main.py, templates/quiz_base.html,
 * templates/base.html, templates/login.html) instead of each declaring its
 * own copy of the font-face block and color literals a fourth time. Not a
 * cross-service volume mount - this file and the font binaries below live
 * entirely inside microlearning/static, served by this service's own
 * already-mounted StaticFiles("/static") route.
 */

@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype-variations"),
       url("/static/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/static/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core triad - see docs/design-system.md's Color section. */
  --color-ink: #1b1b1b;
  --color-paper: #f5f5f7;
  --color-accent: #d97706;
  --color-border: #e2e0d8;

  /* Raised/card background. */
  --color-surface: #fff;

  /* Muted-text scale, darkest -> lightest. */
  --color-text-muted: #555;
  --color-text-subtle: #666;
  --color-text-faint: #888;

  /* Status colors - real state feedback only (form result, correct-answer
     highlight), never decorative, never a substitute for --color-accent. */
  --color-success: #2a7a3b;
  --color-success-bg: #e6f4e6;
  --color-success-text: #1b5e20;
  --color-error: #b3261e;

  /* Type scale (subset actually used by this service's inline-styled
     templates - main.css's full scale table is in docs/design-system.md). */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
}

body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--color-ink);
}

/* Primary button (docs/design-system.md's "Buttons" component pattern) -
   ink fill, paper text, Space Mono uppercase label, accent fill on hover.
   Both class names are kept (`.button` matches the main site's class,
   `.btn` is what every microlearning template already uses) so existing
   markup doesn't need a rename pass just to pick this up. */
.button,
.btn {
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 12px 22px;
  border-radius: 4px;
  background: var(--color-ink);
  color: var(--color-paper) !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.button:hover,
.btn:hover {
  background: var(--color-accent);
  color: var(--color-paper) !important;
}

/* Ghost variant - transparent background, ink border/text, accent on
   hover. Used here for the unsubscribe page's "pause" action (.btn.off),
   which needs to read as a secondary/different action from the primary
   ink-filled button next to it, not as an error state. */
.button--ghost,
.btn.off {
  background: transparent !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-ink);
}

.button--ghost:hover,
.btn.off:hover {
  border-color: var(--color-accent);
  color: var(--color-accent) !important;
  background: transparent !important;
}

/* Card shell (docs/design-system.md's "Card shell" component pattern). */
.card {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  padding: 20px;
}

/* Alert/status boxes - mirrors apps/router.py's PAI-199 Streamlit alert
   override (the other non-Hugo surface that already solved this): paper
   background, ink text, left border colored per status - instead of each
   surface inventing its own pastel-filled box. */
.box {
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0;
  color: var(--color-ink);
}

.box.ok {
  border-left: 4px solid var(--color-success);
}

.box.bad,
.box.error {
  border-left: 4px solid var(--color-error);
}

.box.info {
  border-left: 4px solid var(--color-ink);
}

.muted {
  color: var(--color-text-subtle);
}