/*
 * Math Games Design Tokens
 *
 * Single source of truth for the visual system defined in design-system.md.
 * All three child apps plus the hub consume these variables — never hard-code
 * a color, font, radius, or shadow anywhere else in the math-games codebase.
 */

:root {
  /* Core backgrounds & neutrals */
  --paper: #fff5dc;
  --panel: #ffffff;
  --panel-muted: #f5f5f6;
  --ink: #2e2b2b;
  --ink-strong: #000000;
  --ink-soft: #6b6666;
  --ink-faint: #a8a3a3;

  /* Brand accents */
  --accent: #ffce54;
  --accent-dark: #e8b235;
  --accent-soft: #fff2c8;
  --pink: #f1a3c7;
  --pink-dark: #d07fa5;
  --pink-soft: #fbe4ee;
  --coral: #f96c46;
  --coral-dark: #d9532f;
  --coral-soft: #fde3db;
  --mint: #7cd3c0;
  --mint-dark: #56a89a;
  --mint-soft: #d5f0e9;

  /* Semantic feedback */
  --success: #2f9e6b;
  --success-dark: #1f7a52;
  --success-soft: #d6efdf;
  --danger: #d9532f;
  --danger-dark: #b33d1f;
  --danger-soft: #fde3db;

  /* Edges */
  --edge: #e6dfc8;
  --edge-strong: #c9bf9a;

  /* Typography */
  --font-display:
    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-display);

  /* Logo sizing */
  --logo-hero-width: clamp(14rem, 28vw, 22rem);
  --logo-chrome-width: clamp(3.5rem, 8vw, 5rem);
  --logo-footer-width: clamp(2.5rem, 5vw, 3.5rem);

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* Shadows — warm base color, not slate */
  --shadow-sm: 0 1px 2px rgba(46, 43, 43, 0.08);
  --shadow-md: 0 4px 12px rgba(46, 43, 43, 0.1);
  --shadow-lg: 0 12px 30px rgba(46, 43, 43, 0.12);
}

/* Multi-color heading accent helpers */
.accent-coral { color: var(--coral); }
.accent-pink { color: var(--pink-dark); }
.accent-mint { color: var(--mint-dark); }
.accent-yellow { color: var(--accent-dark); }

/*
 * Shared site chrome — top header with back-to-hub logo link,
 * off-black footer with a white chip containing the color logo.
 */

.site-header {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1.25rem 0.5rem;
}

.site-logo {
  display: inline-block;
  outline: none;
}

.site-logo:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.site-logo img {
  display: block;
  width: var(--logo-chrome-width);
  height: auto;
  transition: transform 200ms ease-out;
}

.site-logo:hover img,
.site-logo:focus-visible img {
  transform: translateY(-2px);
}

.site-footer {
  background: var(--ink);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 1.5rem 1.5rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.site-footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.site-footer-logo img {
  display: block;
  width: var(--logo-footer-width);
  height: auto;
}

.site-footer-copy {
  color: #ffffff;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .site-logo img,
  .site-logo:hover img,
  .site-logo:focus-visible img {
    transition: none;
    transform: none;
  }
}