:root {
  --font-family-base: 'Cairo', system-ui, -apple-system, sans-serif;

  /* Royal platinum and gold winter identity */
  --bg-primary: #d1d9e6;
  --bg-secondary: #b8c2d1;
  --bg-tertiary: #94a3b8;

  --surface-color: #e5e9f0;
  --surface-muted: #dbe3ed;
  --surface-elevated: #edf2f7;
  --surface-hover: #dde5ee;

  --text-main: #0f172a;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-inverse: #0f172a;

  --border-light: rgba(0, 0, 0, 0.06);
  --border-medium: #b8c2d1;
  --border-strong: #d4af37;

  --link-color: #b59410;
  --link-hover: #9c7b00;
  --link-soft: #c9a928;

  --success-color: #1f7a4d;
  --warning-color: #9a6700;
  --danger-color: #b3261e;
  --info-color: #0b57d0;

  --metal-gold: #d4af37;
  --metal-silver: #c0c7d1;
  --metal-bronze: #8a5a3b;

  /* Legacy aliases */
  --color-bg: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-panel: var(--surface-color);
  --color-bg-card: var(--surface-elevated);
  --color-bg-hover: var(--surface-hover);

  --color-primary: var(--link-color);
  --color-primary-dark: var(--link-hover);
  --color-primary-light: var(--link-soft);

  --color-accent: var(--link-color);
  --color-accent-dark: var(--link-hover);

  --color-gold: var(--metal-gold);
  --color-silver: var(--metal-silver);
  --color-bronze: var(--metal-bronze);

  --color-success: var(--success-color);
  --color-warning: var(--warning-color);
  --color-danger: var(--danger-color);
  --color-info: var(--info-color);

  --color-text: var(--text-main);
  --color-text-muted: var(--text-secondary);
  --color-text-dim: var(--text-muted);

  --color-border: var(--border-medium);
  --color-border-light: var(--border-light);

  --icon-filter: brightness(0) saturate(100%) invert(10%) sepia(5%) saturate(1000%) hue-rotate(180deg) brightness(95%) contrast(90%);
  --icon-filter-muted: invert(42%) sepia(8%) saturate(300%) hue-rotate(180deg) brightness(94%);

  --header-top-trim: clamp(8px, 0.8vw, 10px);
  --header-height: clamp(50px, 5vw, 62px);
  --alertbar-height: 24px;
  --header-banner-image: url('../assets/site-banners/site-header-banner-designer.png?v=20260330_HEADER_BANNER3');
  --header-banner-size: cover;
  --header-banner-pos: center;
  --home-stage-banner-image: url('../assets/images/hus.jpg');
  --home-stage-banner-size: cover;
  --home-stage-banner-pos: center center;
  --total-header: var(--header-height);

  --panel-left-width: clamp(160px, 22vw, 300px);
  --panel-right-width: clamp(190px, 24vw, 320px);
  --panel-left-min-width: 136px;
  --panel-right-min-width: 156px;
  --panel-left-max-width: 300px;
  --panel-right-max-width: 320px;
  --panel-center-min-width: 40%;

  --header-inline-padding: clamp(8px, 1vw, 14px);
  --header-nav-gap: clamp(8px, 1.1vw, 18px);
  --nav-cluster-gap: clamp(0px, 0.35vw, 4px);
  --nav-item-size: clamp(36px, 4vw, 52px);
  --nav-icon-size: clamp(20px, 2.2vw, 26px);
  --nav-profile-size: clamp(46px, 4.8vw, 60px);
  --nav-avatar-frame-size: clamp(42px, 4.4vw, 56px);
  --nav-logo-font-size: clamp(1.45rem, 3vw, 3rem);

  --center-stage-padding: clamp(10px, 1.5vw, 22px);
  --center-stage-radius: 24px;
  --chess-stage-side-clearance: clamp(92px, 10vw, 128px);
  --chess-stage-vertical-clearance: clamp(24px, 3vh, 42px);

  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 25px -5px rgba(30, 41, 59, 0.4), 0 8px 10px -6px rgba(30, 41, 59, 0.22);
  --shadow-lg: 0 24px 40px -12px rgba(30, 41, 59, 0.4), 0 16px 18px -10px rgba(30, 41, 59, 0.25);
  --shadow-glow: 0 0 10px #d4af37;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  --z-base: 1;
  --z-panel: 10;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-overlay: 80;
  --z-toast: 300;
  --z-header: 50;
}

[data-theme="dark"] {
  --bg-primary: #181a1f;
  --bg-secondary: #1f232a;
  --bg-tertiary: #272c34;

  --surface-color: #20242b;
  --surface-muted: #252a32;
  --surface-elevated: #2b3038;
  --surface-hover: #313741;

  --text-main: #f3f4f6;
  --text-secondary: #d1d5db;
  --text-muted: #9aa3af;
  --text-inverse: #111111;

  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  --link-color: #8ab4f8;
  --link-hover: #a8c7fa;
  --link-soft: #9fc0f9;

  --success-color: #6bbf8f;
  --warning-color: #d6a23d;
  --danger-color: #f28b82;
  --info-color: #8ab4f8;

  --metal-gold: #c1a25b;
  --metal-silver: #b0b6c0;
  --metal-bronze: #b07a57;

  --icon-filter: invert(96%) sepia(2%) saturate(140%) hue-rotate(180deg) brightness(104%);
  --icon-filter-muted: invert(74%) sepia(6%) saturate(130%) hue-rotate(180deg) brightness(96%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);
}

@media (max-width: 1240px) {
  :root {
    --panel-left-width: clamp(140px, 20vw, 250px);
    --panel-right-width: clamp(166px, 22vw, 270px);
    --panel-left-min-width: 120px;
    --panel-right-min-width: 140px;
    --panel-left-max-width: 250px;
    --panel-right-max-width: 270px;
    --nav-logo-font-size: clamp(1.3rem, 2.8vw, 2.4rem);
    --chess-stage-side-clearance: clamp(84px, 9vw, 118px);
  }
}

@media (max-width: 1024px) {
  :root {
    --panel-left-width: clamp(118px, 18vw, 210px);
    --panel-right-width: clamp(138px, 20vw, 230px);
    --panel-left-min-width: 108px;
    --panel-right-min-width: 126px;
    --panel-left-max-width: 210px;
    --panel-right-max-width: 230px;
    --header-inline-padding: 6px;
    --header-nav-gap: 8px;
    --nav-item-size: clamp(32px, 3.6vw, 40px);
    --nav-icon-size: clamp(18px, 2vw, 22px);
    --nav-profile-size: clamp(42px, 4.4vw, 52px);
    --nav-avatar-frame-size: clamp(38px, 4vw, 48px);
    --nav-logo-font-size: clamp(1.12rem, 2.4vw, 1.85rem);
    --chess-stage-side-clearance: clamp(76px, 8vw, 104px);
  }
}

@media (max-width: 880px) {
  :root {
    --panel-left-width: clamp(96px, 16vw, 170px);
    --panel-right-width: clamp(118px, 18vw, 188px);
    --panel-left-min-width: 92px;
    --panel-right-min-width: 112px;
    --panel-left-max-width: 170px;
    --panel-right-max-width: 188px;
    --nav-item-size: 30px;
    --nav-icon-size: 18px;
    --nav-profile-size: 40px;
    --nav-avatar-frame-size: 36px;
    --nav-logo-font-size: clamp(0.98rem, 2.2vw, 1.35rem);
    --chess-stage-side-clearance: clamp(64px, 7vw, 92px);
  }
}

[data-theme="purple"],
[data-theme="blue"],
[data-theme="cyan"],
[data-theme="teal"],
[data-theme="green"],
[data-theme="yellow"],
[data-theme="orange"],
[data-theme="red"],
[data-theme="pink"],
[data-theme="rose"],
[data-theme="brown"] {
  --text-main: #f3f4f6;
  --text-secondary: #d1d5db;
  --text-muted: #9aa3af;
  --text-inverse: #111111;

  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  --success-color: #6bbf8f;
  --warning-color: #d6a23d;
  --danger-color: #f28b82;

  --icon-filter: invert(96%) sepia(2%) saturate(140%) hue-rotate(180deg) brightness(104%);
  --icon-filter-muted: invert(74%) sepia(6%) saturate(130%) hue-rotate(180deg) brightness(96%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);
}

[data-theme="purple"] {
  --bg-primary: #191620;
  --bg-secondary: #211b2a;
  --bg-tertiary: #2a2336;
  --surface-color: #221d2c;
  --surface-muted: #2a2434;
  --surface-elevated: #302a3c;
  --surface-hover: #383148;
  --link-color: #b794f4;
  --link-hover: #d6bcfa;
  --link-soft: #c4a7f8;
  --info-color: #b794f4;
}

[data-theme="blue"] {
  --bg-primary: #151b24;
  --bg-secondary: #1c2430;
  --bg-tertiary: #243042;
  --surface-color: #1e2835;
  --surface-muted: #253140;
  --surface-elevated: #2b3849;
  --surface-hover: #334154;
  --link-color: #60a5fa;
  --link-hover: #93c5fd;
  --link-soft: #7ab5fb;
  --info-color: #60a5fa;
}

[data-theme="cyan"] {
  --bg-primary: #121d22;
  --bg-secondary: #17262c;
  --bg-tertiary: #1f3239;
  --surface-color: #1a2a30;
  --surface-muted: #21333a;
  --surface-elevated: #274048;
  --surface-hover: #2f4a54;
  --link-color: #22d3ee;
  --link-hover: #67e8f9;
  --link-soft: #4adceb;
  --info-color: #22d3ee;
}

[data-theme="teal"] {
  --bg-primary: #12201e;
  --bg-secondary: #172926;
  --bg-tertiary: #1f3732;
  --surface-color: #1a2d29;
  --surface-muted: #213632;
  --surface-elevated: #28413d;
  --surface-hover: #304b46;
  --link-color: #2dd4bf;
  --link-hover: #5eead4;
  --link-soft: #45dcc9;
  --info-color: #2dd4bf;
}

[data-theme="green"] {
  --bg-primary: #152016;
  --bg-secondary: #1b2a1d;
  --bg-tertiary: #243524;
  --surface-color: #1e2d20;
  --surface-muted: #253626;
  --surface-elevated: #2c4130;
  --surface-hover: #344b38;
  --link-color: #4ade80;
  --link-hover: #86efac;
  --link-soft: #68e192;
  --info-color: #4ade80;
}

[data-theme="yellow"] {
  --bg-primary: #211d14;
  --bg-secondary: #2c2619;
  --bg-tertiary: #39301f;
  --surface-color: #2a2418;
  --surface-muted: #342d1f;
  --surface-elevated: #403724;
  --surface-hover: #4b412b;
  --link-color: #facc15;
  --link-hover: #fde047;
  --link-soft: #f8d33a;
  --info-color: #facc15;
}

[data-theme="orange"] {
  --bg-primary: #23180f;
  --bg-secondary: #2d1f14;
  --bg-tertiary: #39281b;
  --surface-color: #2b1d13;
  --surface-muted: #352418;
  --surface-elevated: #412c1e;
  --surface-hover: #4d3423;
  --link-color: #fb923c;
  --link-hover: #fdba74;
  --link-soft: #f7a35a;
  --info-color: #fb923c;
}

[data-theme="red"] {
  --bg-primary: #241416;
  --bg-secondary: #2f1a1d;
  --bg-tertiary: #3c2226;
  --surface-color: #2d181b;
  --surface-muted: #372023;
  --surface-elevated: #43272b;
  --surface-hover: #4f2f34;
  --link-color: #f87171;
  --link-hover: #fca5a5;
  --link-soft: #f48a8a;
  --info-color: #f87171;
}

[data-theme="pink"] {
  --bg-primary: #231521;
  --bg-secondary: #2d1b29;
  --bg-tertiary: #392231;
  --surface-color: #2b1a27;
  --surface-muted: #351f31;
  --surface-elevated: #41263b;
  --surface-hover: #4c2d46;
  --link-color: #f472b6;
  --link-hover: #f9a8d4;
  --link-soft: #f58ac1;
  --info-color: #f472b6;
}

[data-theme="rose"] {
  --bg-primary: #221517;
  --bg-secondary: #2d1b1f;
  --bg-tertiary: #392328;
  --surface-color: #2a1a1d;
  --surface-muted: #342126;
  --surface-elevated: #3f2930;
  --surface-hover: #4a3139;
  --link-color: #fb7185;
  --link-hover: #fda4af;
  --link-soft: #f58898;
  --info-color: #fb7185;
}

[data-theme="brown"] {
  --bg-primary: #1f1713;
  --bg-secondary: #291f18;
  --bg-tertiary: #34281f;
  --surface-color: #261d17;
  --surface-muted: #30241d;
  --surface-elevated: #3a2c23;
  --surface-hover: #45342a;
  --link-color: #c08457;
  --link-hover: #ddb892;
  --link-soft: #cd976f;
  --info-color: #c08457;
}

.gh-text-glow {
  -webkit-text-stroke: 1.5px #ffffff !important;
  text-stroke: 1.5px #ffffff !important;
  paint-order: stroke fill;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
  color: #111827 !important;
}