/* =========
   FONTS
   =========
   Material Symbols Outlined is self-hosted (v332 variable font) to avoid
   fonts.gstatic.com being blocked by content filters and ad-blockers.
   Update procedure: re-download from
     https://fonts.gstatic.com/s/materialsymbolsoutlined/v332/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2
   and replace wwwroot/fonts/material-symbols-outlined.woff2.
*/
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

/* Utility class previously served by Google Fonts CSS alongside the @font-face.
   Required: font-feature-settings 'liga' activates the ligature substitution that
   maps icon name strings (e.g. "home") to the corresponding icon glyphs. */
.material-symbols-outlined {
  font-family: 'Material Symbols 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;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* =========
   TOKENS
   ========= */

:root {
  /* Brand core */
  --m-primary: #5b3cc4;
  --m-secondary: #c7b8ff;
  --m-accent: #f6c453;
  --m-teal: #4ed7c8;
  --m-glow: #c026d3;

  /* Tier colors (badge progression) */
  --m-tier-bronze: #cd7f32;
  --m-tier-silver: #c0c0c0;
  --m-tier-gold: var(--m-accent);
  --m-tier-platinum: var(--m-teal);
  --m-tier-diamond: #b9f2ff;

  /* Rarity colors (echo collectibles) */
  --m-rarity-legendary: #ff6b6b;

  /* Text on accent backgrounds */
  --m-on-accent: #1a1a2e;

  /* Typography */
  --m-font-display: 'Cinzel', 'Playfair Display', serif;
  --m-font-body:    'Nunito', 'Inter', 'Segoe UI', sans-serif;

  /* Motion */
  --m-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --m-dur-fast:    120ms;
  --m-dur-base:    200ms;
  --m-dur-slow:    350ms;

  /* Shadows */
  --m-shadow-sm:     0 1px 4px color-mix(in srgb, var(--m-primary) 8%, transparent);
  --m-shadow-md:     0 4px 20px color-mix(in srgb, var(--m-primary) 12%, transparent);
  --m-shadow-lg:     0 8px 32px color-mix(in srgb, var(--m-primary) 16%, transparent);
  --m-shadow-glow:   0 0 28px color-mix(in srgb, var(--m-primary) 30%, transparent);
  --m-shadow-accent: 0 0 20px color-mix(in srgb, var(--m-accent) 22%, transparent);
  --m-ring:          0 0 0 3px color-mix(in srgb, var(--m-focus) 35%, transparent);

  /* Light surfaces */
  --m-bg: #f6f4ff;
  --m-bg-2: #e8e2ff;
  --m-surface: #ece7ff;
  --m-surface-elevated: #e8e2ff;
  --m-surface-hover: #f1edff;
  --m-surface-selected: #ddd6ff;
  --m-card: #ece7ff;
  --m-card-gradient: linear-gradient(135deg, #ece7ff 0%, #f1edff 100%);
  --m-border: #ded9ff;
  --m-selected-border: #b8a9ff;

  /* Light text */
  --m-text: #2e1f66;
  --m-text-2: #5c4fa3;
  --m-text-disabled: #a8a3d6;

  /* On-primary surface text (buttons with brand-colored backgrounds) */
  --m-on-primary: #f8f7ff;

  /* Light focus */
  --m-focus: #5b3cc4;

  /* Light status */
  --m-error-bg: #ffe9e9;
  --m-error: #d94b4b;
  --m-error-border: #f3b3b3;

  --m-warning-bg: #fff6d9;
  --m-warning: #e59c00;
  --m-warning-border: #f3d18a;

  --m-success-bg: #e9f8ef;
  --m-success: #4caf75;
  --m-success-border: #b6e2c6;

  --m-info-bg: #eaf6ff;
  --m-info: #46b8dc;
  --m-info-border: #a7d3f2;
}

[data-theme="dark"] {
  /* Dark surfaces */
  --m-bg: color-mix(in srgb, #141127 60%, #000000 40%);
  --m-bg-2: #26225a;
  --m-surface: #1e1a38;
  --m-surface-elevated: #26225a;
  --m-surface-hover: #23204a;
  --m-surface-selected: #2f2866;
  --m-card: #1e1a38;
  --m-card-gradient: linear-gradient(135deg, #1e1a38 0%, #26225a 100%);
  --m-border: #2b2750;

  /* Dark text */
  --m-text: #f8f7ff;
  --m-text-2: #b9b4e6;
  --m-text-disabled: #6f6a9a;

  /* Dark focus */
  --m-focus: #c7b8ff;

  /* Dark selected */
  --m-selected: #c7b8ff;
  --m-selected-border: #8b7fc7;

  /* Dark status */
  --m-error-bg: #2a1515;
  --m-error: #ff6b6b;
  --m-error-border: #7a2e2e;

  --m-warning-bg: #2b2108;
  --m-warning: #ffb84d;
  --m-warning-border: #7a5d1c;

  --m-success-bg: #0f2a1c;
  --m-success: #5edc91;
  --m-success-border: #1e5c3c;

  --m-info-bg: #10212b;
  --m-info: #59c7e6;
  --m-info-border: #1e4c66;
}

[data-theme="bright"] {
  --m-bg: color-mix(in srgb, var(--m-on-primary) 88%, var(--m-secondary) 12%);
  --m-bg-2: color-mix(in srgb, var(--m-on-primary) 78%, var(--m-secondary) 22%);
  --m-surface: color-mix(in srgb, var(--m-on-primary) 82%, var(--m-secondary) 18%);
  --m-surface-elevated: color-mix(in srgb, var(--m-on-primary) 92%, var(--m-secondary) 8%);
  --m-surface-hover: color-mix(in srgb, var(--m-on-primary) 74%, var(--m-secondary) 26%);
  --m-surface-selected: color-mix(in srgb, var(--m-on-primary) 68%, var(--m-secondary) 32%);
  --m-card: color-mix(in srgb, var(--m-on-primary) 90%, var(--m-secondary) 10%);
  --m-card-gradient: linear-gradient(135deg, var(--m-card) 0%, var(--m-surface-elevated) 100%);
  --m-border: color-mix(in srgb, var(--m-primary) 24%, var(--m-on-primary));
  --m-selected-border: color-mix(in srgb, var(--m-primary) 46%, var(--m-on-primary));
  --m-text: color-mix(in srgb, var(--m-primary) 52%, var(--m-on-accent));
  --m-text-2: color-mix(in srgb, var(--m-primary) 66%, var(--m-on-accent));
  --m-text-disabled: color-mix(in srgb, var(--m-primary) 35%, var(--m-on-primary));
  --m-focus: var(--m-primary);
  --m-shadow-sm: 0 1px 3px color-mix(in srgb, var(--m-primary) 8%, transparent);
  --m-shadow-md: 0 3px 12px color-mix(in srgb, var(--m-primary) 10%, transparent);
  --m-shadow-lg: 0 6px 18px color-mix(in srgb, var(--m-primary) 12%, transparent);
  --m-shadow-glow: 0 0 14px color-mix(in srgb, var(--m-primary) 16%, transparent);
  --m-shadow-accent: 0 0 12px color-mix(in srgb, var(--m-accent) 16%, transparent);
}

/* =========
   PAGE
   ========= */

.brand-shell {
  min-height: 100vh;
  background: var(--m-bg);
  color: var(--m-text);
}

.brand-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}

.brand-hero {
  padding: 2.5rem 2rem;
  border-radius: 24px;
  background:
    radial-gradient(
      1200px circle at 20% 10%,
      color-mix(in srgb, var(--m-primary) 25%, transparent),
      transparent 55%
    ),
    radial-gradient(
      900px circle at 70% 35%,
      color-mix(in srgb, var(--m-teal) 16%, transparent),
      transparent 60%
    ),
    var(--m-surface);
  border: 1px solid var(--m-border);
}

.hero-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.brand-hero h1 {
  margin: 0;
}
.hero-tagline {
  margin: 0.5rem 0 0 0;
  color: var(--m-text-2);
}
.hero-blurb {
  margin: 1rem 0 0 0;
  max-width: 70ch;
  color: var(--m-text-2);
}

.brand-section {
  margin-top: 3rem;
}
.brand-section h2 {
  margin-bottom: 1rem;
}

/* =========
   TYPOGRAPHY
   (wire your actual font-family imports in your app)
   ========= */

.h1 {
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 700;
}
.h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 600;
}
.h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 600;
}
.h4 {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
}

.body {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  color: var(--m-text);
}
.body2,
.text-2 {
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--m-text-2);
}

.type-demo {
  display: grid;
  gap: 1rem;
}
.type-row {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 18px;
  padding: 1rem 1.25rem;
}
.type-meta {
  margin-top: 0.35rem;
  color: var(--m-text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

/* =========
   BUTTONS
   ========= */

.btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.btn {
  border-radius: 999px;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--m-text);
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}
.btn:focus-visible {
  outline: 3px solid var(--m-focus);
  outline-offset: 3px;
}

.btn[disabled] {
  cursor: not-allowed;
  color: var(--m-text-disabled);
  border-color: var(--m-border);
  background: color-mix(in srgb, var(--m-surface) 70%, transparent);
}

.btn-primary {
  background: var(--m-primary);
  color: #fff;
}
.btn-primary:hover:not([disabled]) {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--m-secondary);
  color: var(--m-text);
  border-color: var(--m-selected-border);
}
.btn-secondary:hover:not([disabled]) {
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: var(--m-border);
  background: var(--m-surface);
}
.btn-ghost:hover:not([disabled]) {
  background: var(--m-surface-hover);
}

/* Light mode: ghost button border is too faint (#ded9ff on #f6f4ff ≈ 1.3:1).
   Strengthen border to --m-selected-border (#b8a9ff) and deepen bg tint for 3:1 UI contrast. */
:is([data-theme="light"], [data-theme="bright"]) .btn-ghost,
html:not([data-theme="dark"]) .btn-ghost {
  border-color: var(--m-selected-border);
  background: var(--m-surface-hover);
  color: var(--m-text);
}

:is([data-theme="light"], [data-theme="bright"]) .btn-ghost:hover:not([disabled]),
html:not([data-theme="dark"]) .btn-ghost:hover:not([disabled]) {
  border-color: color-mix(in srgb, var(--m-primary) 55%, var(--m-selected-border));
  background: var(--m-surface-selected);
}

[data-theme="dark"] .btn-ghost {
  border-color: var(--m-border);
  background: var(--m-surface);
}

[data-theme="dark"] .btn-ghost:hover:not([disabled]) {
  background: var(--m-surface-hover);
}

.btn-success {
  background: var(--m-success);
  color: #0b1a12;
}
.btn-warning {
  background: var(--m-warning);
  color: #1b1405;
}
.btn-danger {
  background: var(--m-error);
  color: #1f0a0a;
}

/* =========
   STATUS DEMO
   ========= */

.status-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pill {
  border-radius: 999px;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  color: var(--m-text);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.pill[data-active="True"] {
  background: var(--m-surface-selected);
  border-color: var(--m-selected-border);
}

.status-card {
  border-radius: 18px;
  padding: 1.25rem;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
}

.status-card[data-kind="info"] {
  background: var(--m-info-bg);
  border-color: var(--m-info-border);
}
.status-card[data-kind="success"] {
  background: var(--m-success-bg);
  border-color: var(--m-success-border);
}
.status-card[data-kind="warning"] {
  background: var(--m-warning-bg);
  border-color: var(--m-warning-border);
}
.status-card[data-kind="danger"] {
  background: var(--m-error-bg);
  border-color: var(--m-error-border);
}

.status-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.status-message {
  color: var(--m-text-2);
  margin-bottom: 1rem;
}
.status-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* =========
   MOTION (respect reduced motion)
   ========= */

.motion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.motion-card {
  border-radius: 18px;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  padding: 1rem;
}

.motion-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.glow-orb {
  height: 90px;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 30% 35%,
      color-mix(in srgb, var(--m-primary) 45%, transparent),
      transparent 55%
    ),
    radial-gradient(
      circle at 70% 55%,
      color-mix(in srgb, var(--m-teal) 28%, transparent),
      transparent 60%
    ),
    var(--m-surface-elevated);
  border: 1px solid var(--m-border);
  margin-bottom: 0.75rem;
  animation: glowPulse 2.8s ease-in-out infinite;
}

.lift-tile {
  height: 90px;
  border-radius: 18px;
  border: 1px solid var(--m-border);
  background: var(--m-surface-elevated);
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
  transition:
    transform 0.14s ease,
    background 0.14s ease;
}
.lift-tile:hover {
  transform: translateY(-3px);
  background: var(--m-surface-hover);
}

.shimmer-bar {
  height: 16px;
  border-radius: 999px;
  border: 1px solid var(--m-border);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--m-surface) 70%, transparent),
    color-mix(in srgb, var(--m-surface-elevated) 70%, transparent),
    color-mix(in srgb, var(--m-surface) 70%, transparent)
  );
  background-size: 240% 100%;
  animation: shimmer 1.2s linear infinite;
  margin-bottom: 0.75rem;
}

@keyframes glowPulse {
  0%,
  100% {
    filter: saturate(1);
    transform: translateY(0);
  }
  50% {
    filter: saturate(1.12);
    transform: translateY(-1px);
  }
}

@keyframes shimmer {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .lift-tile {
    transition: none;
  }
  .glow-orb,
  .shimmer-bar {
    animation: none;
  }
}

[data-motion="calm"] *,
[data-theme="bright"] * {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

[data-motion="calm"] .m-card-magic:hover,
[data-theme="bright"] .m-card-magic:hover {
  transform: none;
  box-shadow: var(--m-shadow-sm);
}

/* Magical Energy Systems */
@keyframes m-energy-rotate {
  0% { transform: rotate(0deg) scale(1); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
}

.m-energy-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.m-energy-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    color-mix(in srgb, var(--m-primary) 40%, transparent),
    transparent 30%,
    color-mix(in srgb, var(--m-teal) 30%, transparent) 50%,
    transparent 70%
  );
  animation: m-energy-rotate 10s linear infinite;
  z-index: -1;
  filter: blur(8px);
}

.m-energy-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--m-surface);
  border-radius: inherit;
  z-index: -1;
}

[data-theme="dark"] .m-energy-card::after {
  background: var(--m-bg);
}

/* =========
   DRAGON SCALE — Medium Magic Utilities
   ========= */

.m-card-magic {
    position: relative;
    transition: transform var(--m-dur-base) var(--m-ease-spring),
                box-shadow var(--m-dur-base) var(--m-ease-smooth);
}

.m-card-magic:hover {
    transform: translateY(-3px);
    box-shadow: var(--m-shadow-lg);
}

/* NOTE: Cards using ::before for other purposes (e.g., .m-energy-card)
   should not combine with .m-card-magic, or override this pseudo-element. */

/* Prismatic border — light mode */
.m-card-magic::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--m-primary) 15%, transparent),
        color-mix(in srgb, var(--m-teal) 15%, transparent),
        color-mix(in srgb, var(--m-accent) 15%, transparent),
        color-mix(in srgb, var(--m-primary) 15%, transparent)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--m-dur-base) var(--m-ease-smooth);
    pointer-events: none;
    z-index: 1;
}

.m-card-magic:hover::before {
    opacity: 1;
}

/* Arcane glow — dark mode override */
[data-theme="dark"] .m-card-magic:hover {
    box-shadow: var(--m-shadow-lg),
                0 0 20px color-mix(in srgb, var(--m-primary) 20%, transparent);
}

[data-theme="dark"] .m-card-magic::before {
    background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--m-primary) 25%, transparent),
        color-mix(in srgb, var(--m-accent) 20%, transparent),
        color-mix(in srgb, var(--m-primary) 25%, transparent)
    );
}

/* Glass nav */
.m-glass-nav {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--m-surface) 80%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--m-primary) 10%, transparent);
}

[data-theme="dark"] .m-glass-nav {
    /* Variant A polish 2026-05-11: dropped from 70% → 35% surface so the page
       starfield/aura behind the navbar bleeds through. 16px blur is preserved
       so the glass effect (and legibility) holds against busy hero content
       like Variant A's wordmark glow directly below. Only AppHeader consumes
       this utility, so the change is scoped to the marketing-relevant surface. */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--m-surface) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--m-primary) 15%, transparent);
}

/* Shimmer overlay — mobile fallback */
@keyframes shimmer-drift {
    from { background-position: 50% 50%; }
    to { background-position: 150% 150%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .m-card-magic:hover {
        transform: none;
    }
    .m-card-magic::before {
        transition: none;
    }
}

/* =========
   DRAGON SCALE — Modal Tiers
   ========= */

/* Medium tier: atmospheric overlay */
.modal-mid .modal-overlay,
.modal-mid.modal-overlay {
    background: color-mix(in srgb, var(--m-primary) 40%, transparent);
}

[data-theme="dark"] .modal-mid .modal-overlay,
[data-theme="dark"] .modal-mid.modal-overlay {
    background: color-mix(in srgb, #000 55%, transparent);
}

/* High tier: dragon-scale overlay */
.modal-high .modal-overlay,
.modal-high.modal-overlay {
    background: color-mix(in srgb, var(--m-primary) 50%, transparent);
}

[data-theme="dark"] .modal-high .modal-overlay,
[data-theme="dark"] .modal-high.modal-overlay {
    background: color-mix(in srgb, #000 65%, transparent);
}