:root {
    --sidebar-width: 248px;
    --topbar-height: 72px;
    --font-serif: "Playfair Display", Georgia, serif;
    --font-sans: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --root-font-size: 16px;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --font-size-5xl: 3rem;
    --font-size-icon-sm: 1rem;
    --font-size-icon-md: 1.1rem;
    --font-size-badge: 0.75rem;
    --font-size-1: var(--font-size-sm);
    --font-size-2: var(--font-size-md);
    --font-size-3: var(--font-size-lg);
    --font-size-4: var(--font-size-2xl);
    --font-size-5: var(--font-size-3xl);
    --font-size-6: var(--font-size-5xl);
    --font-size-body: var(--font-size-md);
    --font-weight-body: var(--font-weight-regular);
    --line-height-body-text: var(--line-height-body);
    --line-height-tight: 1.15;
    --line-height-snug: 1.04;
    --line-height-base: var(--line-height-body);
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --heading-color: var(--text);
    --heading-font-weight: var(--font-weight-medium);
    --heading-margin-bottom: var(--space-3);
    --h1-size: var(--font-size-body);
    --h2-size: var(--font-size-body);
    --h3-size: var(--font-size-body);
    --h4-size: var(--font-size-body);
    --h5-size: var(--font-size-body);
    --h6-size: var(--font-size-body);
    --heading-hero-size: var(--font-size-body);
    --heading-panel-size: var(--font-size-body);
    --heading-card-title-size: var(--font-size-body);
    --heading-section-size: var(--font-size-body);
    --heading-compact-size: var(--font-size-body);
    --heading-list-size: var(--font-size-body);
    --heading-feed-identity-size: var(--font-size-body);
    --heading-feed-body-size: var(--font-size-body);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.125rem;
    --radius-xl: 1.375rem;
    --radius-pill: 999px;
    --shadow-sm: 0 8px 24px rgba(74, 58, 125, 0.055);
    --shadow-md: 0 18px 48px rgba(74, 58, 125, 0.12), 0 2px 8px rgba(74, 58, 125, 0.045);
    --container: 1240px;
    --brand-primary: #7654c7;
    --brand-primary-hover: #6241b4;
    --brand-accent: #a690e8;
    --card-bg: var(--surface);
    --card-bg-soft: var(--surface-soft);
    --card-bg-subtle: var(--surface-subtle);
    --card-border-width: 1px;
    --card-border-color: var(--border);
    --card-border-color-soft: var(--border-subtle);
    --card-radius-sm: 14px;
    --card-radius: 18px;
    --card-radius-lg: 24px;
    --card-shadow: var(--shadow-sm);
    --card-shadow-lg: var(--shadow-md);
    --card-padding: var(--space-5);
    --card-padding-compact: var(--space-4);
    --brand-500: var(--brand-primary);
    --brand-600: var(--brand-primary-hover);
    --accent-500: var(--brand-accent);
    --brand-50: color-mix(in srgb, var(--brand-500) 8%, white);
    --brand-700: color-mix(in srgb, var(--brand-500) 78%, black 22%);
    --surface-elevated: var(--surface);
    --text-primary: var(--text);
    --border-soft: var(--border-subtle);
    --color-white: #ffffff;
    --color-gold-400: var(--color-gold-400);
    --color-danger-400: #ef4444;
    --surface-mix-light: var(--color-white);
    --surface-mix-dark: #0f172a;
    --brand-400: #8f72db;
    --danger-400: var(--color-danger-400);
    --danger-500: #dc2626;
    --danger-600: #c62828;
    --danger-700: #b71c1c;
    --toggle-off: #d9d6e4;
    --toggle-on: var(--brand-500);
    --toggle-knob-on: #ffffff;
    --cropper-stage: #101828;
    --surface-subtlelt: #fbfaff;
    --surface-subtle: #f8f7fd;
    --border-subtle: #e9e5f3;
    --surface-raised: #ffffff;
    --surface-menu: #ffffff;
    --surface-hover: #eee9ff;
    --surface-bubble: #f3f0fb;
    --surface-bubble-strong: #fbfaff;
    --surface-tooltip: rgba(0, 0, 0, 0.92);
    --surface-scrim: rgba(17, 24, 39, 0.70);
    --text-inverse: #ffffff;
    --text-subtle-strong: #344054;
    --accent-blue: #7654c7;
    --accent-blue-strong: #6241b4;
    --accent-blue-soft: #eee9ff;
    --accent-gold: #c89f18;
    --accent-gold-soft: #fffdf4;
    --accent-gold-border: #e8c14e;
    --rank-gold: #d7c159;
    --rank-silver: #98a0ad;
    --rank-bronze: #a57d46;
    --progress-track: #ebe7f4;
    --comment-bubble-bg: #f5f2fb;
    --comment-bubble-border: #e7e2f0;
    --bg: #f7f7fc;
    --surface: #ffffff;
    --surface-soft: #f4f2fb;
    --surface-strong: #e9e5f3;
    --surface-overlay: rgba(17, 24, 39, 0.56);
    --text: #24222d;
    --text-muted: #74717f;
    --border: #e5e2ed;
    --border-strong: #d8d2e4;
    --success: #126b46;
    --notice: #5a54d6;
    --danger: #b22139;
    --surface-alt: var(--surface-soft);
    --shadow-soft-premium: 0 10px 24px rgba(15, 23, 42, 0.06);
    --shadow-card-premium: 0 18px 44px rgba(15, 23, 42, 0.08);
    --shadow-card-premium-hover: 0 22px 52px rgba(15, 23, 42, 0.12);
    --border-premium: color-mix(in srgb, var(--border) 82%, white 18%);
    --text-poster-background: #f7f3ec;
    --text-poster-ink: #24222d;
    --text-poster-accent: var(--brand-primary);
    --text-poster-footer-background: #23222a;
    --text-poster-divider: rgba(36, 34, 45, 0.22);
    --text-poster-display-background: var(--us-text-poster-background, var(--text-poster-background));
    --text-poster-display-ink: var(--text-poster-ink);
    --text-poster-display-accent: var(--us-text-poster-accent, var(--text-poster-accent));
    --text-poster-display-footer-background: var(--us-text-poster-bar-background, var(--text-poster-footer-background));
}

[data-theme="dark"] {
    --bg: #17121B;
    --surface-overlay: rgba(10, 7, 12, 0.78);
    --surface: #2A2030;
    --surface-soft: #211827;
    --surface-strong: #342546;
    --surface-subtle: #1C1521;
    --border-subtle: #3B2C47;
    --surface-raised: #2A2030;
    --surface-menu: #2A2030;
    --surface-hover: #342546;
    --surface-bubble: #2F2337;
    --surface-bubble-strong: #342546;
    --surface-tooltip: #17121B;
    --surface-scrim: rgba(10, 7, 12, 0.84);
    --surface-elevated: var(--surface-raised);
    --card-bg: var(--surface);
    --card-bg-soft: var(--surface-soft);
    --card-bg-subtle: var(--surface-subtle);
    --text: #F0EAF3;
    --text-muted: #B4A6BA;
    --text-inverse: #F0EAF3;
    --text-subtle-strong: #D9CCE0;
    --border: #493755;
    --border-strong: #61486F;
    --brand-primary: #AA7CEB;
    --brand-primary-hover: #BE98F2;
    --brand-accent: #AA7CEB;
    --brand-50: #342546;
    --brand-700: #BE98F2;
    --surface-mix-light: #F0EAF3;
    --surface-mix-dark: #17121B;
    --surface-subtlelt: #1C1521;
    --brand-400: #BE98F2;
    --brand-500: #AA7CEB;
    --brand-600: #BE98F2;
    --notice: #AA7CEB;
    --accent-blue: #AA7CEB;
    --accent-blue-strong: #BE98F2;
    --accent-blue-soft: #342546;
    --accent-gold-soft: #3B3021;
    --accent-gold-border: #8C7338;
    --progress-track: #493755;
    --comment-bubble-bg: #2F2337;
    --comment-bubble-border: #493755;
    --toggle-off: #493755;
    --toggle-on: #AA7CEB;
    --toggle-knob-on: #F0EAF3;
    --surface-alt: #211827;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.42);
    --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.48), 0 2px 7px rgba(0, 0, 0, 0.28);
    --shadow-soft-premium: 0 12px 28px rgba(0, 0, 0, 0.30);
    --shadow-card-premium: 0 20px 48px rgba(0, 0, 0, 0.36);
    --shadow-card-premium-hover: 0 24px 56px rgba(0, 0, 0, 0.44);
    --border-premium: color-mix(in srgb, var(--border) 90%, #AA7CEB 10%);
    --text-poster-background: #211827;
    --text-poster-ink: #F0EAF3;
    --text-poster-accent: #AA7CEB;
    --text-poster-footer-background: #17121B;
    --text-poster-divider: #493755;
    --text-poster-display-background: #211827;
    --text-poster-display-ink: #F0EAF3;
    --text-poster-display-accent: #AA7CEB;
    --text-poster-display-footer-background: #17121B;
}