:root {
  color-scheme: dark;

  /* Global */
  --roar-bg: #0b0d12;
  --roar-bg-deep: #05070b;
  --roar-bg-soft: rgba(5, 8, 14, 0.18);
  --roar-overlay: rgba(6, 8, 14, 0.62);
  --roar-accent-orange: #ff7a18;
  --roar-accent-cyan: #25d7e8;
  --roar-accent: var(--roar-accent-cyan);
  --roar-accent-2: var(--roar-accent-orange);
  --roar-accent-border: rgba(255, 122, 32, 0.72);
  --roar-accent-border-soft: rgba(255, 122, 32, 0.30);
  --roar-focus: #f1bb54;
  --roar-danger: #ff6f7d;
  --roar-success: #32e29f;
  --roar-warning: #ffbf47;
  --roar-text: #f2e7a6;
  --roar-text-strong: #fff8ea;
  --roar-text-muted: rgba(255, 240, 180, 0.62);
  --roar-text-soft: rgba(255, 240, 180, 0.82);
  --roar-text-cool: rgba(223, 251, 247, 0.82);

  /* Typography */
  --roar-font-title: Arial, Helvetica, sans-serif;
  --roar-font-body: Arial, Helvetica, sans-serif;
  --roar-title-size: clamp(2.4rem, 4.5vw, 3.7rem);
  --roar-subtitle-size: clamp(1.2rem, 2.2vw, 1.8rem);
  --roar-body-size: 14px;
  --roar-copy-size: var(--roar-body-size);
  --roar-label-size: 11px;
  --roar-type-letter-spacing: 0;

  /* Panels */
  --roar-panel-bg-raw: 9, 14, 24;
  --roar-panel-opacity: 0.88;
  --roar-panel-bg: rgba(var(--roar-panel-bg-raw), var(--roar-panel-opacity));
  --roar-panel-bg-strong: rgba(8, 12, 20, 0.94);
  --roar-panel-bg-soft: rgba(13, 20, 33, 0.78);
  --roar-card-bg: rgba(14, 22, 36, 0.9);
  --roar-panel-border: rgba(210, 144, 17, 0.72);
  --roar-panel-border-strong: rgba(255, 248, 234, 0.12);
  --roar-panel-border-subtle: rgba(255, 244, 209, 0.115);
  --roar-panel-border-accent: rgba(87, 218, 205, 0.24);
  --roar-panel-radius: 18px;
  --roar-panel-blur: 16px;
  --roar-panel-glow-strength: 34px;
  --roar-panel-glow-color: rgba(2, 4, 10, 0.34);
  --roar-glow-soft: 0 20px 42px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --roar-glow-strong: 0 30px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --roar-panel-glow: 0 24px var(--roar-panel-glow-strength) var(--roar-panel-glow-color);
  --roar-radius-sm: 10px;
  --roar-radius-md: 14px;
  --roar-radius-lg: var(--roar-panel-radius);
  --roar-radius-xl: 28px;

  /* Buttons */
  --roar-button-bg-top: #f47a1e;
  --roar-button-bg-mid: #6f2c0f;
  --roar-button-bg-bottom: #090604;
  --roar-button-radius: 8px;
  --roar-button-height: 52px;
  --roar-button-letter-spacing: 0.11em;
  --roar-button-font-size: 13px;
  --roar-button-font-weight: 900;
  --roar-button-border: rgba(255, 122, 32, 0.72);
  --roar-button-border-soft: rgba(255, 198, 116, 0.52);
  --roar-button-border-hover: rgba(255, 177, 103, 0.92);
  --roar-button-text: #fff4d1;
  --roar-button-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.58);
  --roar-button-glow-strength: 18px;
  --roar-button-bg: linear-gradient(180deg, color-mix(in srgb, var(--roar-button-bg-top) 88%, transparent) 0%, color-mix(in srgb, var(--roar-button-bg-mid) 90%, transparent) 48%, color-mix(in srgb, var(--roar-button-bg-bottom) 97%, transparent) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.12), transparent 60%);
  --roar-button-bg-hover: linear-gradient(180deg, color-mix(in srgb, var(--roar-button-bg-top) 88%, white) 0%, color-mix(in srgb, var(--roar-button-bg-mid) 88%, #120704) 50%, #120704 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.18), transparent 62%);
  --roar-button-secondary-bg: linear-gradient(180deg, rgba(186, 84, 25, 0.74) 0%, rgba(65, 26, 10, 0.88) 56%, rgba(8, 5, 4, 0.96) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.10), transparent 64%);
  --roar-button-shadow: 0 15px 30px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 244, 209, 0.16), inset 0 -14px 20px rgba(0, 0, 0, 0.46);
  --roar-button-secondary-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.10), inset 0 -12px 18px rgba(0, 0, 0, 0.42);
  --roar-button-glow: 0 0 var(--roar-button-glow-strength) rgba(255, 92, 12, 0.20), 0 12px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -12px 16px rgba(0, 0, 0, 0.42);
  --roar-button-glow-strong: 0 0 calc(var(--roar-button-glow-strength) + 8px) rgba(255, 120, 28, 0.42), 0 14px 28px rgba(74, 45, 10, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -12px 16px rgba(0, 0, 0, 0.46);

  /* License */
  --roar-license-shell-bg: linear-gradient(180deg, rgba(7, 10, 15, 0.92), rgba(3, 5, 9, 0.88));
  --roar-license-module-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--roar-panel-bg-soft) 92%, var(--roar-bg-deep)), color-mix(in srgb, var(--roar-panel-bg-strong) 78%, var(--roar-bg-deep)));
  --roar-license-module-selected-border: var(--roar-button-border);
  --roar-license-process-card-bg: linear-gradient(180deg, rgba(12, 17, 25, 0.82), rgba(5, 8, 14, 0.74));
  --roar-license-lesson-card-bg: linear-gradient(180deg, rgba(13, 20, 33, 0.78), rgba(6, 10, 17, 0.72));

  /* AIM */
  --roar-aim-shell-bg: radial-gradient(circle at 10% 0%, rgba(87, 218, 205, 0.060), transparent 28%), radial-gradient(circle at 100% 16%, rgba(255, 112, 32, 0.070), transparent 32%), linear-gradient(180deg, rgba(7, 11, 16, 0.92), rgba(2, 4, 8, 0.90));
  --roar-aim-panel-bg: linear-gradient(180deg, rgba(8, 12, 17, 0.90), rgba(2, 4, 8, 0.86)), linear-gradient(90deg, rgba(255, 112, 32, 0.040), transparent 48%, rgba(60, 195, 191, 0.032));
  --roar-aim-stage-bg: linear-gradient(180deg, #121923, #04070b);
  --roar-aim-grid-opacity: 0.10;
  --roar-aim-inner-bg: linear-gradient(180deg, rgba(10, 15, 19, 0.84), rgba(3, 6, 10, 0.78)), linear-gradient(90deg, rgba(87, 218, 205, 0.030), rgba(255, 112, 32, 0.026));
  --roar-aim-scoreboard-row-height: 44px;
  --roar-aim-own-entry-glow: 0 0 22px rgba(255, 112, 32, 0.16), inset 3px 0 0 rgba(255, 122, 32, 0.72);
  --roar-aim-own-row-bg: linear-gradient(180deg, rgba(18, 16, 13, 0.90), rgba(4, 7, 11, 0.84)), linear-gradient(90deg, rgba(255, 112, 32, 0.085), rgba(87, 218, 205, 0.040));

  /* Scoreboard */
  --roar-scoreboard-rank-color: var(--roar-accent-cyan);
  --roar-scoreboard-name-color: var(--roar-text-strong);
  --roar-scoreboard-score-color: var(--roar-accent-orange);
  --roar-scoreboard-attempts-color: var(--roar-text-cool);
  --roar-scoreboard-row-bg: var(--roar-aim-inner-bg);
  --roar-scoreboard-row-border: var(--roar-panel-border-subtle);
  --roar-scoreboard-row-height: var(--roar-aim-scoreboard-row-height);

  /* Admin */
  --roar-admin-bg: var(--roar-bg-deep);
  --roar-admin-panel-bg: rgba(14, 16, 22, 0.94);
  --roar-admin-panel-strong-bg: rgba(20, 23, 31, 0.98);
  --roar-admin-border: rgba(224, 168, 63, 0.28);
  --roar-admin-border-soft: rgba(244, 238, 224, 0.11);
  --roar-admin-text: #f4eee0;
  --roar-admin-muted: rgba(244, 238, 224, 0.62);

  /* Compatibility aliases */
  --web-v1-bg: var(--roar-bg);
  --web-v1-bg-deep: var(--roar-bg-deep);
  --web-v1-overlay: var(--roar-overlay);
  --web-v1-panel: var(--roar-panel-bg);
  --web-v1-panel-strong: var(--roar-panel-bg-strong);
  --web-v1-card: var(--roar-panel-bg-soft);
  --web-v1-card-strong: var(--roar-card-bg);
  --web-v1-page-surface: var(--roar-bg-soft);
  --web-v1-page-line: var(--roar-panel-border);
  --web-v1-border-soft: var(--roar-panel-border-subtle);
  --web-v1-text: var(--roar-text);
  --web-v1-text-soft: var(--roar-text-soft);
  --web-v1-text-muted: var(--roar-text-muted);
  --web-v1-text-cyan: var(--roar-text-cool);
  --web-v1-text-success: var(--roar-success);
  --web-v1-text-danger: var(--roar-danger);
  --web-v1-accent: var(--roar-accent-cyan);
  --web-v1-focus: var(--roar-focus);
  --web-v1-success: var(--roar-success);
  --web-v1-warning: var(--roar-warning);
  --web-v1-danger: var(--roar-danger);
  --web-v1-border: var(--roar-panel-border);
  --web-v1-shadow-soft: var(--roar-glow-soft);
  --web-v1-shadow-panel: var(--roar-panel-glow);
  --web-v1-shell-radius: var(--roar-radius-xl);
  --web-v1-hero-radius: var(--roar-radius-lg);
  --web-v1-panel-radius: var(--roar-radius-lg);
  --web-v1-card-radius: var(--roar-radius-md);
  --web-v1-copy-size: var(--roar-copy-size);
  --web-v1-subtitle-size: var(--roar-subtitle-size);
  --web-v1-title-size: var(--roar-title-size);
}

/* ROAR primary high-specificity compatibility: beats older late intro/secondary overrides. */
body[data-app-view="intro_ready"] #intro-start-button.entry-button,
body[data-app-view="intro_ready"] #name-entry-submit.entry-button,
body[data-app-view="intro_ready"] #login-submit-button.entry-button,
body[data-app-view="intro_ready"] .entry-button-primary,
body[data-app-view="intro_ready"] #intro-login-button.entry-button,
body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button,
body[data-app-view="intro_ready"] #login-back-button.entry-button,
body[data-app-view="intro_ready"] .entry-button-secondary,
body[data-app-view="intro_ready"] .entry-button-ghost,
.preview-button-reference .lab-reference-button,
.preview-button-reference .roar-button-secondary.lab-reference-button {
  border-color: var(--roar-button-border, rgba(255, 122, 32, 0.72)) !important;
  background: var(--roar-button-bg, #7a2d08) !important;
  color: var(--roar-button-text, #fff4d1) !important;
  box-shadow: var(--roar-button-glow, 0 0 18px rgba(255, 92, 12, 0.20)), var(--roar-button-shadow, 0 15px 30px rgba(0, 0, 0, 0.38)) !important;
  font-size: var(--roar-button-font-size, 13px) !important;
  text-shadow: var(--roar-button-text-shadow, 0 1px 0 rgba(0, 0, 0, 0.58)) !important;
}

body[data-app-view="intro_ready"] .entry-button-secondary,
body[data-app-view="intro_ready"] .entry-button-ghost,
.preview-button-reference .roar-button-secondary.lab-reference-button {
  background: var(--roar-button-secondary-bg, #351609) !important;
  border-color: var(--roar-button-border-soft, rgba(255, 198, 116, 0.52)) !important;
  box-shadow: 0 0 var(--roar-button-glow-strength, 18px) rgba(255, 103, 22, 0.18), var(--roar-button-secondary-shadow, 0 12px 24px rgba(0, 0, 0, 0.34)) !important;
}

body[data-app-view="intro_ready"] #intro-login-button.entry-button:hover:not(:disabled),
body[data-app-view="intro_ready"] #intro-login-button.entry-button:focus-visible,
body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:hover:not(:disabled),
body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:focus-visible,
body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled),
.preview-button-reference .lab-reference-button:hover:not(:disabled),
.preview-button-reference .lab-reference-button:focus-visible {
  border-color: var(--roar-button-border-hover, rgba(255, 177, 103, 0.92)) !important;
  background: var(--roar-button-bg-hover, var(--roar-button-bg)) !important;
  color: var(--roar-button-text, #fff4d1) !important;
  box-shadow: var(--roar-button-glow-strong, var(--roar-button-glow)) !important;
}

/* ROAR primary base aliases: existing CTA classes inherit the shared project button. */
.roar-button-primary,
.roar-button-secondary,
.entry-button-primary,
.entry-button-secondary,
.entry-button-ghost,
.intro-briefing-button,
#license-app button.primary:not(.entry-button),
#license-app button.secondary:not(.entry-button),
#license-app .actionbar-buttons button,
#module-rail-toggle.rail-toggle,
body[data-app-view="aim_arena"] #aim-arena-app #aim-start-button,
body[data-app-view="aim_arena"] #aim-arena-app #aim-start-button.primary,
body[data-app-view="aim_arena"] #aim-arena-app #aim-close-button.aim-license-button,
body[data-app-view="aim_arena"] #aim-arena-app .aim-scoreboard-submit-button,
body[data-app-view="aim_arena"] #aim-arena-app .aim-scoreboard-license-button,
body[data-app-view="completion"] #license-app #completion-submit.primary,
html body[data-app-view="completion"] #license-app #completion-submit.primary,
.admin-shell button,
.admin-link,
.lab-button,
.lab-reference-button {
  min-height: var(--roar-button-height, 52px) !important;
  border: 1px solid var(--roar-button-border, rgba(255, 122, 32, 0.72)) !important;
  border-radius: var(--roar-button-radius, 8px) !important;
  background: var(--roar-button-bg, #7a2d08) !important;
  color: var(--roar-button-text, #fff4d1) !important;
  box-shadow: var(--roar-button-glow, 0 0 18px rgba(255, 92, 12, 0.20)), var(--roar-button-shadow, 0 15px 30px rgba(0, 0, 0, 0.38)) !important;
  font-size: var(--roar-button-font-size, 13px) !important;
  font-weight: var(--roar-button-font-weight, 900) !important;
  letter-spacing: var(--roar-button-letter-spacing, 0.11em) !important;
  text-shadow: var(--roar-button-text-shadow, 0 1px 0 rgba(0, 0, 0, 0.58)) !important;
  text-transform: uppercase !important;
}

.roar-button-secondary,
.entry-button-secondary,
.entry-button-ghost,
.intro-briefing-button-secondary,
#license-app button.secondary:not(.entry-button),
#license-app .actionbar-buttons button.secondary,
.admin-link {
  background: var(--roar-button-secondary-bg, #351609) !important;
  border-color: var(--roar-button-border-soft, rgba(255, 198, 116, 0.52)) !important;
  box-shadow: 0 0 var(--roar-button-glow-strength, 18px) rgba(255, 103, 22, 0.18), var(--roar-button-secondary-shadow, 0 12px 24px rgba(0, 0, 0, 0.34)) !important;
}

.roar-button-primary:hover:not(:disabled),
.roar-button-primary:focus-visible,
.roar-button-secondary:hover:not(:disabled),
.roar-button-secondary:focus-visible,
.entry-button:hover:not(:disabled),
.entry-button:focus-visible,
#license-app .actionbar-buttons button:hover:not(:disabled),
#license-app .actionbar-buttons button:focus-visible,
#module-rail-toggle.rail-toggle:hover,
#module-rail-toggle.rail-toggle:focus-visible,
#module-rail-toggle.rail-toggle[aria-expanded="true"],
.lab-button:hover:not(:disabled),
.lab-button:focus-visible,
.lab-reference-button:hover:not(:disabled),
.lab-reference-button:focus-visible {
  border-color: var(--roar-button-border-hover, rgba(255, 177, 103, 0.92)) !important;
  background: var(--roar-button-bg-hover, var(--roar-button-bg)) !important;
  color: var(--roar-button-text, #fff4d1) !important;
  box-shadow: var(--roar-button-glow-strong, var(--roar-button-glow)) !important;
}

body[data-app-view="aim_arena"] #aim-arena-app .aim-scoreboard-control-group button {
  border-radius: var(--roar-button-radius, 8px) !important;
  letter-spacing: 0.04em !important;
}