/* =============================================================================
   TOGASHI — Base Styles (Reset + Typography + Global Utilities)
   ============================================================================= */

/* --- Modern Reset --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-md-size);
    font-weight: var(--text-body-md-weight);
    line-height: var(--text-body-md-line);
    color: var(--color-on-background);
    background-color: var(--color-background);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Selection */
::selection {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

/* --- Images --- */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy-load fade-in */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--transition-slow);
}

img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* --- Links --- */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

/* --- Lists --- */
ul, ol {
    list-style: none;
}

/* --- Buttons --- */
button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    color: inherit;
}

/* --- Inputs --- */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}

/* --- Typography Classes --- */
.text-display-lg {
    font-family: var(--font-display);
    font-size: var(--text-display-lg-size);
    font-weight: var(--text-display-lg-weight);
    line-height: var(--text-display-lg-line);
    letter-spacing: var(--text-display-lg-spacing);
}

.text-display-lg-mobile {
    font-family: var(--font-display);
    font-size: var(--text-display-lg-mobile-size);
    font-weight: var(--text-display-lg-mobile-weight);
    line-height: var(--text-display-lg-mobile-line);
}

.text-headline-lg {
    font-family: var(--font-display);
    font-size: var(--text-headline-lg-size);
    font-weight: var(--text-headline-lg-weight);
    line-height: var(--text-headline-lg-line);
}

.text-headline-md {
    font-family: var(--font-display);
    font-size: var(--text-headline-md-size);
    font-weight: var(--text-headline-md-weight);
    line-height: var(--text-headline-md-line);
}

.text-body-lg {
    font-family: var(--font-body);
    font-size: var(--text-body-lg-size);
    font-weight: var(--text-body-lg-weight);
    line-height: var(--text-body-lg-line);
}

.text-body-md {
    font-family: var(--font-body);
    font-size: var(--text-body-md-size);
    font-weight: var(--text-body-md-weight);
    line-height: var(--text-body-md-line);
}

.text-label-caps {
    font-family: var(--font-label);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    line-height: var(--text-label-line);
    letter-spacing: var(--text-label-spacing);
    text-transform: uppercase;
}

.text-chat {
    font-family: var(--font-chat);
    font-size: var(--text-chat-size);
    font-weight: var(--text-chat-weight);
    line-height: var(--text-chat-line);
}

/* --- Color Utilities --- */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-on-primary { color: var(--color-on-primary); }
.text-on-secondary { color: var(--color-on-secondary); }
.text-error { color: var(--color-error); }

.bg-background { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-low { background-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-high { background-color: var(--color-surface-container-high); }
.bg-surface-highest { background-color: var(--color-surface-container-highest); }
.bg-surface-lowest { background-color: var(--color-surface-container-lowest); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-secondary-container { background-color: var(--color-secondary-container); }
.bg-error { background-color: var(--color-error); }
.bg-error-container { background-color: var(--color-error-container); }

/* --- Utility Classes --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.litho-shadow {
    box-shadow: var(--shadow-litho);
}

.card-shadow {
    box-shadow: var(--shadow-card);
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-container);
}

::-webkit-scrollbar-thumb {
    background: var(--color-outline-variant);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline);
}

/* --- Focus Visible for Accessibility --- */
:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* --- Material Symbols Integration --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.material-symbols-outlined.fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Responsive Text --- */
@media (max-width: 768px) {
    .text-display-lg {
        font-size: var(--text-display-lg-mobile-size);
        line-height: var(--text-display-lg-mobile-line);
    }

    .text-headline-lg {
        font-size: 28px;
    }
}