@import "animations.css";

@import "header.css";
@import "footer.css";

@import "sections/about.css";
@import "sections/projects.css";
@import "sections/experience.css";

@import "fonts.css";

:root {
    color-scheme: light dark;

    --clr-primary-bg: light-dark(rgba(255, 255, 255, 1), rgba(34, 34, 34, 1));
    --clr-primary-bg-faint: light-dark(rgba(255, 255, 255, 0.6), rgba(34, 34, 34, 0.6));
    --clr-primary-bg-contrast-faint: light-dark(rgba(255, 255, 255, 0.6), rgba(51, 51, 51, 0.6));
    --clr-primary-bg-contrast-faint-reverse: light-dark(rgba(51, 51, 51, 0.6), rgba(255, 255, 255, 0.6));
    --clr-secondary-bg: rgba(51, 51, 51, 1);
    --clr-primary-fg: light-dark(var(--clr-secondary-bg), rgba(255, 255, 255, 1));
    --clr-accent-theme: light-dark(rgba(170, 170, 0, 1), rgba(255, 255, 0, 1));
    --clr-accent-toggle: light-dark(rgba(34, 34, 255, 1), rgba(119, 119, 255, 1));
    --clr-accent-toggle-faint: light-dark(rgba(34, 34, 255, 0.6), rgba(119, 119, 255, 0.6));
    --clr-accent-link: light-dark(rgba(170, 17, 170, 1), rgba(255, 136, 255, 1));

    --drop-shadow-toggle: drop-shadow(0 0 8px var(--clr-accent-toggle));
    --drop-shadow-theme: drop-shadow(0 0 8px var(--clr-accent-theme)) drop-shadow(0 0 12px var(--clr-accent-theme)) drop-shadow(0 0 24px var(--clr-accent-theme));
    --drop-shadow-link: drop-shadow(0 0 8px var(--clr-accent-link));
    --drop-shadow-text: drop-shadow(0 0 6px var(--clr-primary-fg));
    --drop-shadow-header: drop-shadow(0 0 1px var(--clr-primary-fg)) drop-shadow(0 0 8px var(--clr-primary-fg)) drop-shadow(0 0 16px var(--clr-primary-fg));
    --drop-shadow-card: var(--drop-shadow-text);

    --lightup-transition: 200ms ease-out;

    --gap: 32px;

    --ff-primary: "Kanit", sans-serif;
    --ff-primary-ko: "Gothic A1", sans-serif;

    --fs-normal: 16px;
    --fs-medium: 1.5rem;
    --fs-large: 3rem;

    --fw-bold: 600;
    --fw-normal: 400;
    --fw-light: 100;
}

*::selection {
    color: var(--clr-secondary-bg);
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

html {
    scroll-padding-top: calc(var(--gap) * 2 + 2rem);
    font-size: var(--fs-normal);
    box-sizing: border-box;
}

html:lang(en) {
    font-family: var(--ff-primary);
    --fw-light: 100;
    --fw-bold: 600;
}

html:lang(ko) {
    font-family: var(--ff-primary-ko);
    --fw-light: 300;
    --fw-bold: 700;
}

body {
    background-color: var(--clr-primary-bg);
    color: var(--clr-primary-fg);
    font-weight: var(--fw-normal);
    font-size: var(--fs-normal);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 4);
    min-width: 320px;
}

ul {
    list-style: none;
    padding-left: 0;
}

a {
    text-decoration: none;
    color: var(--clr-primary-fg);
}

h1 {
    font-size: var(--fs-large);
    font-weight: var(--fw-bold);
    transform: translateZ(0);
}

h2 {
    font-size: var(--fs-medium);
    font-weight: var(--fw-bold);
}

h1,
h2 {
    -webkit-text-stroke: 1px var(--clr-primary-fg);
    text-stroke: 1px var(--clr-primary-fg);
    color: transparent;
    transition: filter var(--lightup-transition);
}

h1:hover,
h2:hover {
    filter: var(--drop-shadow-header);
}

p {
    transition: filter var(--lightup-transition);
    font-size: var(--fs-normal);
}

p:hover {
    filter: var(--drop-shadow-text);
}

main {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 4);
}

button {
    width: 140px;
    height: 48px;
}

svg {
    width: 32px;
    height: 32px;
}

.container {
    margin-inline: auto;
    width: min(64em, 100% - var(--gap));
}

.light {
    color-scheme: light;
}

.dark {
    color-scheme: dark;
}

@media screen and (max-width: 86em) {
    :root {
        --fs-normal: 10px;
        --gap: 24px;
    }

    html {
        scroll-padding-top: calc(var(--gap) * 6);
    }

    body {
        gap: calc(var(--gap) * 2);
    }

    main {
        gap: calc(var(--gap) * 2);
    }

    button {
        width: 100px;
        height: 32px;
    }

    svg {
        width: 24px;
        height: 24px;
    }
}