/* ==========================================================================
   theme-default.css — the "clean" theme.

   Dark neutral canvas with a maroon accent (Texas A&M). Supplies token values
   only; all layout lives in base.css.
   ========================================================================== */

:root[data-theme="default"] {
  /* page canvas */
  --bg-page: #14111a;
  --bg-page-image: radial-gradient(
      ellipse 80% 55% at 15% -10%,
      rgba(124, 30, 46, 0.35),
      transparent 60%
    ),
    radial-gradient(ellipse 70% 50% at 95% 10%, rgba(60, 40, 90, 0.3), transparent 65%);
  --bg-overlay: none;
  --bg-attachment: fixed;

  /* surfaces */
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.085);
  --border: rgba(255, 255, 255, 0.13);
  --border-width: 1px;
  --media-figure-bg: #eef1f7;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.42);

  /* type */
  --text: #e9e5ef;
  --text-muted: #a49dae;
  --heading: #ffffff;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --heading-transform: none;
  --heading-shadow: none;
  --heading-spacing: -0.02em;

  /* accent */
  --accent: #8c2337;
  --accent-soft: rgba(140, 35, 55, 0.22);
  --on-accent: #ffffff;
  --link: #ef9aa7;

  /* header — maroon bar carrying a dark active tab (the inverse of the page,
     so the current tab reads as a cut-out rather than a highlight) */
  --nav-bg: rgba(140, 35, 55, 0.9);
  --nav-bg-image: none;
  --nav-bg-size: auto;
  --nav-text: #ffffff;
  --nav-border: rgba(0, 0, 0, 0.3);
  --nav-item-bg: transparent;
  --nav-item-bg-active: #14111a;
  --nav-item-text-active: #ffffff;

  /* geometry */
  --radius: 10px;
  --radius-lg: 16px;
  --edges: auto;
}

/* Frosted header, but only where the browser can actually blur. */
@supports (backdrop-filter: blur(12px)) {
  :root[data-theme="default"] .site-header {
    backdrop-filter: blur(12px);
  }
}

/* The toggle wears the ? block here — hit it to warp into the Mario theme. */
:root[data-theme="default"] .theme-toggle {
  background-image: url("../assets/img/mysterybox.png");
}

/* The toggle offers the theme you are NOT currently in. */
:root[data-theme="default"] .theme-toggle__to-mario {
  display: inline;
}

/* Easter egg belongs to the Mario theme only. */
:root[data-theme="default"] .mystery-box {
  display: none;
}

/* Portrait sits flush in this theme; the Mario theme frames it. */
:root[data-theme="default"] .hero__portrait {
  border-color: rgba(255, 255, 255, 0.16);
}