/* EU Ruins shared design settings (colours, spacing, radii, motion).
 *
 * Every --eu-*, --eu-shell-*, --eu-rust-*, --eu-isle-*, --isle-* and --ip-*
 * custom property on the site is defined here and nowhere else. Loaded first
 * on every page (site-nav.js adds it if a page forgets the link).
 *
 * Sections keep the selector, media query and order they had in the file they
 * came from, so the cascade resolves exactly as before:
 *   site-nav.css  - brand colours for each game
 *   eu-theme.css  - accent, surfaces, text, radius, shadow, easing
 *   isle-themes.css - the four Isle colour themes (isle, ember, dusk, canopy)
 *   isle-polish.css - Isle component aliases (--ip-*)
 *   site-shell.css  - header/shell settings and their breakpoints
 *
 * Rust has one pink, one orange and one gold: --eu-rust-pink #ff3366,
 * --eu-rust-orange #ff7417 and --eu-rust-gold #ffd700 (the values the pages
 * themselves use). --eu-accent*, --eu-gold and --eu-shell-accent* point at
 * them instead of carrying their own near-identical shades.
 *
 * The Isle header (--eu-shell-*) follows the chosen Isle theme; the purple
 * block below is only the fallback before a theme attribute exists.
 */

/* ===== from site-nav.css ===== */
:root {
  --eu-rust-pink: #ff3366;
  --eu-rust-orange: #ff7417;
  --eu-rust-gold: #ffd700;
  --eu-rust-bg: #090405;
  --eu-rust-panel: #140b0e;
  --eu-rust-border: rgba(255, 116, 23, 0.34);
  --eu-rust-muted: #bd8fa1;
  --eu-isle-cyan: #11d9f2;
  --eu-isle-panel: #061821;
  --eu-isle-border: rgba(17, 217, 242, 0.35);
}

/* ===== from eu-theme.css ===== */
:root {
  --eu-accent: var(--eu-rust-pink);
  --eu-accent-2: var(--eu-rust-orange);
  --eu-accent-soft: rgba(255, 51, 102, 0.14);
  --eu-accent-line: rgba(255, 51, 102, 0.30);
  --eu-accent-glow: rgba(255, 51, 102, 0.34);
  --eu-gold: var(--eu-rust-gold);
  --eu-good: #33d17a;
  --eu-bad: #ff4d5e;
  --eu-bg-0: #08050a;
  --eu-bg-1: #0d0910;
  --eu-surface: #150d16;
  --eu-surface-2: #1c1220;
  --eu-hairline: rgba(255, 255, 255, 0.08);
  --eu-hairline-2: rgba(255, 255, 255, 0.14);
  --eu-text: #f7f2f5;
  --eu-text-dim: #c7aebb;
  --eu-text-mute: #8f7684;
  --eu-radius: 14px;
  --eu-radius-sm: 9px;
  --eu-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  --eu-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.34);
  --eu-ease: cubic-bezier(0.22, 0.85, 0.28, 1);
}
html[data-game="isle"] {
  --eu-accent: #16dcf2;
  --eu-accent-2: #38e8b6;
  --eu-accent-soft: rgba(22, 220, 242, 0.14);
  --eu-accent-line: rgba(22, 220, 242, 0.30);
  --eu-accent-glow: rgba(22, 220, 242, 0.34);
  --eu-gold: #c9f76d;
  --eu-bg-0: #04090d;
  --eu-bg-1: #06121a;
  --eu-surface: #08202b;
  --eu-surface-2: #0a2a38;
  --eu-text-dim: #a7cdd8;
  --eu-text-mute: #6f97a3;
}

/* ===== from isle-themes.css ===== */
:is(html,body)[data-game="isle"][data-isle-theme="isle"] {
  --isle-accent: #38bdf8;
  --isle-accent-rgb: 56,189,248;
  --isle-accent-deep-rgb: 27,91,119;
  --isle-bg-rgb: 3,10,16;
  --isle-secondary: #34d399;
  --eu-isle-cyan: #38bdf8;
  --eu-isle-panel: #081722;
  --eu-isle-border: rgba(56,189,248,.38);
}
:is(html,body)[data-game="isle"][data-isle-theme="ember"] {
  --isle-accent: #fb7185;
  --isle-accent-rgb: 251,113,133;
  --isle-accent-deep-rgb: 120,54,64;
  --isle-bg-rgb: 13,7,8;
  --isle-secondary: #f59e0b;
  --eu-isle-cyan: #fb7185;
  --eu-isle-panel: #1b0e11;
  --eu-isle-border: rgba(251,113,133,.38);
}
:is(html,body)[data-game="isle"][data-isle-theme="dusk"] {
  --isle-accent: #a78bfa;
  --isle-accent-rgb: 167,139,250;
  --isle-accent-deep-rgb: 80,67,120;
  --isle-bg-rgb: 7,6,17;
  --isle-secondary: #22d3ee;
  --eu-isle-cyan: #a78bfa;
  --eu-isle-panel: #15112a;
  --eu-isle-border: rgba(167,139,250,.38);
}
:is(html,body)[data-game="isle"][data-isle-theme="canopy"] {
  --isle-accent: #4ade80;
  --isle-accent-rgb: 74,222,128;
  --isle-accent-deep-rgb: 36,107,61;
  --isle-bg-rgb: 4,10,7;
  --isle-secondary: #facc15;
  --eu-isle-cyan: #4ade80;
  --eu-isle-panel: #0a1c12;
  --eu-isle-border: rgba(74,222,128,.36);
}
:is(html,body)[data-game="isle"][data-isle-theme] {
  --eu-accent: var(--isle-accent);
  --eu-accent-2: var(--isle-secondary);
  --eu-accent-soft: color-mix(in srgb,var(--isle-accent) 14%,transparent);
  --eu-accent-line: color-mix(in srgb,var(--isle-accent) 30%,transparent);
  --eu-accent-glow: color-mix(in srgb,var(--isle-accent) 34%,transparent);
  --eu-gold: var(--gold);
  --eu-bg-0: var(--bg);
  --eu-bg-1: var(--bg2);
  --eu-surface: var(--card);
  --eu-surface-2: var(--card2);
  --eu-text: var(--txt);
  --eu-text-dim: var(--txt2);
  --eu-text-mute: var(--muted);
}

/* ===== from isle-polish.css ===== */
html[data-game="isle"] {
  --ip-accent: var(--isle-accent,var(--accent-primary,var(--red,var(--cyan,#38bdf8))));
  --ip-accent-2: var(--isle-secondary,var(--accent-secondary,var(--purple,var(--mint,#34d399))));
  --ip-bg: var(--bg,var(--bg-primary,#030a10));
  --ip-bg-2: var(--bg2,var(--bg-secondary,#06131c));
  --ip-surface: var(--card,var(--bg-card,var(--panel,#081722)));
  --ip-surface-2: var(--card2,var(--bg-card-hover,var(--panel2,#0d2230)));
  --ip-text: var(--txt,var(--text,var(--text-primary,#f5fbff)));
  --ip-text-2: var(--txt2,var(--text2,var(--text-secondary,#b7d5e4)));
  --ip-muted: var(--muted,var(--text-muted,#7898a8));
  --ip-line: var(--bdr,var(--border,var(--border-color,var(--line,#183246))));
  --ip-line-2: var(--bdr2,var(--border2,var(--border-light,var(--line2,#29516b))));
  --ip-soft: color-mix(in srgb,var(--ip-accent) 10%,transparent);
  --ip-soft-2: color-mix(in srgb,var(--ip-accent) 18%,transparent);
  --ip-glow: color-mix(in srgb,var(--ip-accent) 28%,transparent);
  --ip-panel: linear-gradient(145deg,color-mix(in srgb,var(--ip-surface-2) 68%,transparent),color-mix(in srgb,var(--ip-surface) 96%,transparent));
  --ip-panel-soft: linear-gradient(145deg,color-mix(in srgb,var(--ip-accent) 6%,var(--ip-surface)),color-mix(in srgb,var(--ip-surface) 96%,transparent));
  --ip-font-head: "Rajdhani","Orbitron",sans-serif;
  --ip-font-body: "Inter","Segoe UI",sans-serif;
  --ip-radius: 14px;
  --ip-radius-sm: 9px;
  --ip-shadow: 0 18px 52px rgba(0,0,0,.28);
  --ip-shadow-hover: 0 22px 62px rgba(0,0,0,.38),0 0 28px var(--ip-soft);
}
@media(max-width:520px) {
  html[data-game="isle"] {
    --ip-radius: 12px;
  }
}

/* ===== from site-shell.css ===== */
:root {
  --eu-shell-max: 3440px;
  --eu-shell-gutter: clamp(18px, 2.2vw, 72px);
  --eu-shell-header: clamp(74px, 3.4vw, 104px);
  --eu-shell-radius: clamp(9px, .48vw, 14px);
  --eu-shell-ease: cubic-bezier(.2, .8, .2, 1);
  --eu-shell-accent: var(--eu-rust-pink);
  --eu-shell-accent-2: var(--eu-rust-orange);
  --eu-shell-glow: rgba(255, 51, 102, .22);
  --eu-shell-tint: 255, 51, 102;
  --eu-shell-tint-deep: 122, 24, 49;
  --eu-shell-active-text: #ff9ab4;
  --eu-shell-soft-text: #ffe0e8;
  --eu-shell-text: #fff6f8;
  --eu-shell-text-2: #e3c3cc;
  --eu-shell-text-3: #ffecf1;
  --eu-shell-panel: 16, 8, 11;
  --eu-shell-base: #0a0608;
}
html[data-game="isle"],
body[data-game="isle"] {
  --eu-shell-accent: #9b75ff;
  --eu-shell-accent-2: #30d9f4;
  --eu-shell-glow: rgba(155, 117, 255, .24);
  --eu-shell-tint: 158, 119, 255;
  --eu-shell-tint-deep: 75, 42, 122;
  --eu-shell-active-text: #b998ff;
  --eu-shell-soft-text: #e5d9ff;
  --eu-shell-text: #f7f5ff;
  --eu-shell-text-2: #cbc1e3;
  --eu-shell-text-3: #eee8ff;
  --eu-shell-panel: 8, 7, 18;
  --eu-shell-base: #06050d;
}
/* The header, menu and dropdowns take the chosen Isle theme's colours.
   Covers body too: site-shell's purple block above also targets body. */
:is(html,body)[data-game="isle"][data-isle-theme],
html[data-game="isle"][data-isle-theme] body {
  --eu-shell-accent: var(--isle-accent);
  --eu-shell-accent-2: var(--isle-secondary);
  --eu-shell-glow: rgba(var(--isle-accent-rgb), .24);
  --eu-shell-tint: var(--isle-accent-rgb);
  --eu-shell-tint-deep: var(--isle-accent-deep-rgb);
  --eu-shell-active-text: color-mix(in srgb, var(--isle-accent) 62%, #fff);
  --eu-shell-soft-text: color-mix(in srgb, var(--isle-accent) 16%, #fff);
  --eu-shell-text: var(--txt);
  --eu-shell-text-2: var(--txt2);
  --eu-shell-text-3: color-mix(in srgb, var(--isle-accent) 8%, #fff);
  --eu-shell-panel: var(--isle-bg-rgb);
  --eu-shell-base: var(--bg);
}
@media (max-width: 1500px) {
  :root {
    --eu-shell-gutter: clamp(14px, 1.6vw, 24px);
  }
}
@media (max-width: 1180px) {
  :root {
    --eu-shell-header: 70px;
  }
}
@media (max-width: 620px) {
  :root {
    --eu-shell-gutter: 10px;
  }
}

/* ===== Shared scale (type, spacing, radius, page width) =====
   Pages pick from these steps instead of inventing their own sizes:
   six text sizes, three corner radii, a 4px-based spacing ladder and one
   content width. Headings use Rajdhani; Bebas Neue is for page titles only. */
:root {
  --eu-fs-xs: 12px;
  --eu-fs-sm: 13px;
  --eu-fs-base: 15px;
  --eu-fs-md: 18px;
  --eu-fs-lg: 24px;
  --eu-fs-xl: clamp(36px, 2.6vw + 16px, 62px);
  --eu-r-sm: 8px;
  --eu-r-md: 12px;
  --eu-r-lg: 16px;
  --eu-space-1: 4px;
  --eu-space-2: 8px;
  --eu-space-3: 12px;
  --eu-space-4: 16px;
  --eu-space-5: 24px;
  --eu-space-6: 32px;
  --eu-space-7: 48px;
  --eu-page-max: 1280px;
  --eu-page-pad: clamp(16px, 2.4vw, 28px);
  --eu-font-title: "Bebas Neue", "Rajdhani", sans-serif;
  --eu-font-head: "Rajdhani", "Inter", sans-serif;
  --eu-font-body: "Inter", "Segoe UI", sans-serif;
}