:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-card: #1c1c1c;
    --accent-yellow: #facc15;
    --accent-yellow-hover: #eab308;
    --accent-yellow-glow: rgba(250, 204, 21, 0.25);
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --border-color: #27272a;
    --font-family-main: 'Kanit', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family-main);
    font-weight: 400;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-secondary) inset;
    transition: background-color 5000s ease-in-out 0s;
}