@import 'themes/sparkle.css';

:root {
    /* Colors - Default Light Theme */
    --color-primary: #000000;
    --color-background: #FFFFFF;
    --color-text: #333333;
    --color-text-muted: #9BA1AC;
    --color-border: #B6BCC8;
    --color-button: #F0F2F4;
    --color-button-hover: #000000;
    --color-link: #0000EE;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-base: 16px;
    --font-size-small: 0.875rem;
    --font-size-large: 1.75rem;
    --font-size-xlarge: 3rem;
    --line-height-base: 1.6;
    --line-height-heading: 1.3;

    --transition-speed: 0.3s;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background: var(--color-background);
    padding: 2rem;
    transition: background-color 0.3s, color 0.3s;
}

/* Layout */
header {
    max-width: 1200px;
    margin: 0 auto;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

/* Add these styles after the .top-bar styles */
.logo-container {
    position: relative;
    width: 42px;
    height: 42px;
}

.logo-link {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--color-text); /* Use theme text color */
}

/* Remove default link states and ensure theme color inheritance */
.logo-link,
.logo-link:visited,
.logo-link:hover,
.logo-link:active {
    color: var(--color-text);
}

.logo-main {
    position: relative;
    z-index: 2;
    fill: currentColor; /* Ensure SVG uses current text color */
}

/* Pulse animations remain the same */
.logo-link::before,
.logo-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    background: currentColor;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.84998 21C8.84998 14.2999 14.3021 8.84866 21.0031 8.84866C27.7042 8.84866 32.8833 14.032 33.145 20.5015H42C41.7345 9.13406 32.4358 0 21.0031 0C9.57044 0 0 9.40202 0 21C0 28.0702 3.49387 34.3241 8.84998 38.129V21ZM32.1591 21C32.1591 14.8396 27.1645 9.8457 21.0031 9.8457C14.8418 9.8457 9.84717 14.8396 9.84717 21V38.7945C12.4648 40.4384 15.4713 41.5214 18.6971 41.8741V31.9163C19.4413 32.0721 20.2129 32.1556 21.0031 32.1556C27.1645 32.1556 32.1591 27.1617 32.1591 21.0013V21ZM18.6971 21C18.6971 19.7288 19.7317 18.6944 21.0031 18.6944C22.2745 18.6944 23.3091 19.7288 23.3091 21C23.3091 22.2712 22.2745 23.3056 21.0031 23.3056C19.7317 23.3056 18.6971 22.2712 18.6971 21ZM21.0031 33.1513C27.5372 33.1513 32.882 27.968 33.1451 21.4985V21.4998H42C41.7345 32.8672 32.4358 42.0012 21.0031 42.0012C20.5631 42.0012 20.1269 41.985 19.6943 41.9589V33.0803C20.1244 33.1264 20.5606 33.1513 21.0031 33.1513Z'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    animation: none;
}

.logo-link:hover::before {
    animation: pulse1 2s ease-out infinite;
}

.logo-link:hover::after {
    animation: pulse2 2s ease-out infinite;
    animation-delay: 0.5s;
}

/* Navigation */
.info-links {
    display: flex;
    gap: 0.5rem;
}

.info-links a,
.info-links .style-button.link {
    color: var(--color-link);
    background-color: rgba(0, 0, 238, 0.1);
    font-size: var(--font-size-small);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.info-links a:hover,
.info-links .style-button.link:hover {
    background-color: rgba(0, 0, 238, 0.2);
}

.style-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 4rem;
    font-size: var(--font-size-small);
}

.style-button {
    background: var(--color-button);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
    color: inherit;
    border-radius: 100px;
    font-size: inherit;
}

.style-button:hover {
    background: var(--color-button-hover);
    color: var(--color-background);
}

/* Typography */
h1 {
    font-size: var(--font-size-xlarge);
    line-height: var(--line-height-heading);
    font-weight: normal;
    margin-bottom: 2rem;
}

.second-line {
    display: block;
    min-height: 1.3em;
}

.response-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.2em;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.response-text a:hover {
    opacity: 1;
}

.ask {
    font-size: var(--font-size-large);
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

/* Projects Table */
.projects {
    max-width: 1200px;
    margin: 0 auto;
}

.project {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--color-border);
}

.project.headers {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    border: none;
}

.project > div {
    color: var(--color-text-muted);
}

.company-link {
    color: inherit;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1200px) {
    body {
        padding: 1rem;
    }
    .project {
        gap: 1rem;
    }
}

@media (max-width: 900px) {
    h1 {
        font-size: 2rem;
    }
    .project {
        font-size: 0.875rem;
    }
}

@media (max-width: 700px) {
    .project {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .project.headers {
        display: none;
    }
    .project > div:nth-child(1) {
        grid-column: 1;
        text-align: left;
    }
    .project > div:nth-child(2) {
        grid-column: 1;
        text-align: left;
        grid-row: 2;
    }
    .project > div:nth-child(3) {
        grid-column: 2;
        text-align: right;
    }
    .project > div:nth-child(4) {
        grid-column: 2;
        text-align: right;
        grid-row: 2;
    }
    .project > div:nth-child(5),
    .project > div:nth-child(6) {
        display: none;
    }
    .project {
        padding: 1rem 0;
    }
}

@media (max-width: 500px) {
    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .style-nav {
        flex-wrap: wrap;
    }
}