/* =============================================================
   Malicious Group — Element Web custom skin (Compound tokens)
   Targets Element's --cpd-* design tokens. Declared UNLAYERED so
   it beats Element's @layer cpd-semantic definitions in the cascade.
   Palette = malicious.group blog (tasktrace tokens).
   ============================================================= */

/* ---- Self-hosted Inter (matches blog body font) ---- */
@font-face { font-family:'MG Inter'; font-style:normal; font-weight:400;
  src:url("./mg-fonts/inter-v12-latin-regular.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:'MG Inter'; font-style:normal; font-weight:500;
  src:url("./mg-fonts/inter-v12-latin-500.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:'MG Inter'; font-style:normal; font-weight:600;
  src:url("./mg-fonts/inter-v12-latin-600.woff2") format("woff2"); font-display:swap; }
@font-face { font-family:'MG Inter'; font-style:normal; font-weight:700;
  src:url("./mg-fonts/inter-v12-latin-700.woff2") format("woff2"); font-display:swap; }

/* =============================================================
   1. COMPOUND TOKEN OVERRIDES  (the real reskin)
   Unlayered + !important so they win over @layer cpd-semantic.
   Applied at :root AND the theme-class wrapper so the value
   propagates to every subtree (custom props inherit from nearest
   ancestor that specifies them).
   ============================================================= */
:root,
[class*="cpd-theme-"],
.cpd-theme-dark,
.cpd-theme-dark-hc {

  /* ---- Accent ramp: green -> teal (#00f2bd) ---- */
  --cpd-color-green-100: #04130f !important;
  --cpd-color-green-200: #062019 !important;
  --cpd-color-green-300: #0a2c24 !important;
  --cpd-color-green-400: #0e3d31 !important;
  --cpd-color-green-500: #11503f !important;
  --cpd-color-green-600: #156a54 !important;
  --cpd-color-green-700: #1a8a6e !important;
  --cpd-color-green-800: #00b896 !important;
  --cpd-color-green-900: #00d9aa !important;
  --cpd-color-green-1000: #00f2bd !important;
  --cpd-color-green-1100: #2bf5c8 !important;
  --cpd-color-green-1200: #5cf7d4 !important;
  --cpd-color-green-1300: #8ff9e0 !important;
  --cpd-color-green-1400: #c2fbed !important;

  /* ---- Surfaces: blog backgrounds ---- */
  --cpd-color-bg-canvas-default:        #0d0f14 !important;  /* main content */
  --cpd-color-bg-canvas-disabled:       #0b0d11 !important;
  --cpd-color-bg-subtle-primary:        #111318 !important;  /* panels/cards */
  --cpd-color-bg-subtle-secondary:      #0b0d11 !important;  /* rails */
  --cpd-color-gradient-subtle-linear:   linear-gradient(180deg,#0d0f14,#07090e) !important;

  /* ---- Accent surfaces / actions -> teal ---- */
  --cpd-color-bg-accent-rest:           #00f2bd !important;
  --cpd-color-bg-action-primary-rest:   #00f2bd !important;
  --cpd-color-bg-action-primary-hovered:#c2fbed !important;
  --cpd-color-bg-action-primary-pressed:#00d9aa !important;
  --cpd-color-text-action-accent:       #00f2bd !important;
  --cpd-color-text-on-solid-primary:    #06231d !important;  /* dark text on teal */
  --cpd-color-icon-accent-primary:      #00f2bd !important;
  --cpd-color-icon-accent-tertiary:     #00f2bd !important;

  /* ---- Text ---- */
  --cpd-color-text-primary:             #f9f9f7 !important;
  --cpd-color-text-secondary:           rgba(249,249,247,0.60) !important;

  /* ---- Borders / separators ---- */
  --cpd-color-border-interactive-secondary: rgba(255,255,255,0.10) !important;
  --cpd-color-border-interactive-hovered:   rgba(0,242,189,0.50) !important;

  /* legacy var names still referenced by some chunks */
  --accent: #00f2bd !important;
  --timeline-background-color: #0d0f14 !important;
  --primary-content: #f9f9f7 !important;
}

/* =============================================================
   2. GLOBAL FONT
   ============================================================= */
html, body, button, input, textarea, select,
#matrixchat, .mx_MatrixChat {
  font-family: 'MG Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
code, pre, kbd, samp { font-family: 'SF Mono','Fira Code',Menlo,monospace !important; }

/* App-wide deepest background behind everything */
body, #matrixchat, .mx_MatrixChat {
  background-color: #07090e !important;
}

/* =============================================================
   3. LOGIN / AUTH SCREEN  (logo + "this is Matrix" messaging)
   These classes are confirmed present in the current build.
   ============================================================= */
.mx_AuthPage {
  background-color: #07090e !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(0,242,189,0.07), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(0,242,189,0.05), transparent 46%) !important;
}
.mx_AuthPage_modal {
  background-color: #0d0f14 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* MG logo in place of the Element logo on the login/register header */
.mx_AuthHeaderLogo { display:flex !important; align-items:center; justify-content:center; }
.mx_AuthHeaderLogo img,
.mx_AuthHeaderLogo svg { display:none !important; }
.mx_AuthHeaderLogo::before {
  content:""; display:block; width:128px; height:84px;
  background:url("./mg-logo.png") center / contain no-repeat;
}

/* ---- Default welcome page: swap logo for MG + brand it (scoped, no malformation) ---- */
.mx_DefaultWelcome_logo img { display:none !important; }
.mx_DefaultWelcome_logo::before {
  content:""; display:block; width:120px; height:78px;
  background:url("./mg-logo.png") center / contain no-repeat; margin:0 auto;
}
/* kicker above the welcome content */
.mx_DefaultWelcome::before {
  content:"Matrix Chat Server";
  display:block; text-align:center;
  font:600 11px/1 'MG Inter',sans-serif; letter-spacing:2.5px; text-transform:uppercase;
  color:#00f2bd; margin:0 0 14px;
}
/* clarifier note below the sign-in / create buttons */
.mx_DefaultWelcome::after {
  content:"You're signing in to the Malicious Group Matrix server \2014  not the website. Use your Matrix (chat) account, or create one with an invite token.";
  display:block; text-align:center;
  font:400 12.5px/1.55 'MG Inter',sans-serif; color:rgba(249,249,247,0.60);
  max-width:340px; margin:22px auto 0;
}
/* tighten the default welcome heading */
.mx_DefaultWelcome h1 { color:#f9f9f7 !important; }

/* =============================================================
   4. SCROLLBARS — terminal/teal flavor
   ============================================================= */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#07090e; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.14); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,242,189,0.40); }