:root {
    --page-bg: #1A1D27;
    --hero-page-bg: #0F1117;
    --text: #E8E8ED;
    --accent-color1: #7C5CFF;
    --accent-color2: #3DDC97;

    --surface: color-mix(in srgb, var(--text) 5%, transparent);
    --surface-raised: color-mix(in srgb, var(--text) 10%, transparent);
    --border: color-mix(in srgb, var(--text) 10%, transparent);
    --text-muted: color-mix(in srgb, var(--text) 60%, transparent);
    --tag-bg: color-mix(in srgb, var(--text) 14%, transparent);
    --tag-text: color-mix(in srgb, var(--text) 85%, transparent);
    --display-tag-bg: color-mix(in srgb, var(--text) 22%, transparent);
    --display-tag-text: var(--text);
    --overlay: color-mix(in srgb, var(--page-bg) 55%, transparent);
    --band-experience: var(--page-bg);
    --band-featured: color-mix(in srgb, var(--page-bg) 88%, var(--accent-color1));
    --band-projects: color-mix(in srgb, var(--page-bg) 89%, var(--text));
    --band-skills: color-mix(in srgb, var(--page-bg) 88%, var(--accent-color2));
    --band-about: color-mix(in srgb, var(--page-bg) 86%, var(--text));
    --band-custom-a: color-mix(in srgb, var(--page-bg) 94%, var(--accent-color2));
    --band-custom-b: color-mix(in srgb, var(--page-bg) 94%, var(--accent-color1));

    --font-hero: "Space Grotesk", sans-serif;
    --font-section-title: "Space Grotesk", sans-serif;
    --font-row-title: "Space Grotesk", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-label: "Inter", sans-serif;
}

:root {
    --bg: var(--hero-page-bg);
    --column-bg: var(--page-bg);
    --accent: var(--accent-color1);
    --accent-2: var(--accent-color2);
    --text-soft: color-mix(in srgb, var(--text) 64%, transparent);
    --text-faint: color-mix(in srgb, var(--text) 42%, transparent);
    --line: color-mix(in srgb, var(--text) 8%, transparent);
    --card: color-mix(in srgb, var(--text) 3.5%, transparent);
    --accent-tint: color-mix(in srgb, var(--accent) 20%, transparent);
    --accent-edge: color-mix(in srgb, var(--accent) 55%, transparent);
    --accent-hover: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent-2-tint: color-mix(in srgb, var(--accent-2) 8%, transparent);
    --accent-2-edge: color-mix(in srgb, var(--accent-2) 30%, transparent);
    --media-placeholder: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent)), var(--bg);
    --skeleton-grad: linear-gradient(170deg, color-mix(in srgb, var(--text) 16%, var(--page-bg)) 0%, var(--page-bg) 115%);
    --skeleton-base: color-mix(in srgb, var(--text) 6%, transparent);
    --skeleton-highlight: color-mix(in srgb, var(--text) 14%, transparent);
    --skeleton-speed: 1.4s;
    --role-section-title: var(--accent-color2);
    --role-hero-roles: var(--accent-color2);
    --role-primary-button: var(--accent-color2);
    --role-tag: var(--accent-color2);
    --role-special-tag: var(--accent-color1);
    --role-scrollbar: var(--accent-color2);
    --role-link: var(--accent-color2);
    --role-hover-border: var(--accent-color1);
    --role-particles-dots: var(--accent-color1);
    --role-particles-links: var(--accent-color2);
    --text-scale: 1;
    --column-gutter: 24px;
    --column-max: 1200px;
    --column: min(100% - 2 * var(--column-gutter), var(--column-max));
}

@media (min-width: 2560px) {
    :root {
        --column-max: 1440px;
    }
}

@media (min-width: 3840px) {
    :root {
        --column-max: 1800px;
    }
}