/* Compass of Care — light classroom theme. Tokens: DESIGN.md. Load LAST. */

:root,
[data-theme="light"] {
    --surface-canvas: #f3f5f4;
    --surface-primary: #ffffff;
    --surface-secondary: #e8eeeb;
    --surface-elevated: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.88);
    --text-primary: #1c211f;
    --text-secondary: #4b5751;
    --text-tertiary: #6b756f;
    --text-on-accent: #06281c;
    --border-subtle: #e6ece8;
    --border-default: #d3dbd6;
    --border-strong: #b7c2bb;
    --border-accent: rgba(15, 157, 110, 0.35);
    --accent-primary: #0f9d6e;
    --accent-link: #0b8a60;
    --accent-hover: #12b37c;
    --lantern-wash: rgba(15, 157, 110, 0.18);
    --status-success: #0f9d6e;
    --status-warning: #b45309;
    --status-error: #dc4b54;
    --status-info: #4c63d2;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 9999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --font-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-serif: "Gowun Batang", "Apple Myungjo", "Nanum Myeongjo", serif;
    --font-hand: "Gaegu", cursive;
    --font-mono: ui-monospace, Menlo, monospace;
    --motion-micro: 140ms ease-out;
    --motion-standard: 220ms ease-in-out;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0f9d6e;
    --sidebar-width: 260px;

    --primary: #0f9d6e;
    --primary-dark: #0b8a60;
    --primary-light: #12b37c;
    --secondary: #6b756f;
    --success: #0f9d6e;
    --warning: #b45309;
    --danger: #dc4b54;
    --info: #4c63d2;

    --gray-50: #f3f5f4;
    --gray-100: #e8eeeb;
    --gray-200: #e6ece8;
    --gray-300: #d3dbd6;
    --gray-400: #b7c2bb;
    --gray-500: #6b756f;
    --gray-600: #4b5751;
    --gray-700: #37413d;
    --gray-800: #1c211f;
    --gray-900: #141816;

    --shadow-sm: none;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
    --radius: 8px;

    --pico-font-family: var(--font-sans);
    --pico-background-color: #f3f5f4;
    --pico-color: #1c211f;
    --pico-text-selection-color: rgba(15, 157, 110, 0.22);
    --pico-primary: #0f9d6e;
    --pico-primary-background: #0f9d6e;
    --pico-primary-hover: #12b37c;
    --pico-primary-inverse: #ffffff;
    --pico-primary-border: #0f9d6e;
    --pico-secondary: #6b756f;
    --pico-form-element-background-color: #ffffff;
    --pico-form-element-border-color: #d3dbd6;
    --pico-form-element-color: #1c211f;
    --pico-form-element-placeholder-color: #6b756f;
    --pico-form-element-active-border-color: #0f9d6e;
    --pico-form-element-focus-color: rgba(15, 157, 110, 0.28);
    --pico-card-background-color: #ffffff;
    --pico-card-border-color: #d3dbd6;
    --pico-muted-border-color: #d3dbd6;
    --pico-muted-color: #6b756f;
    --pico-mark-background-color: rgba(15, 157, 110, 0.14);
}

html {
    color-scheme: light;
}

html, body, button, input, select, textarea {
    font-family: var(--font-sans);
}

body {
    background: var(--surface-canvas);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

h1, h2, h3, p, li, label, button, td, th, small {
    text-wrap: pretty;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-primary);
}

h2, h3 {
    font-weight: 500;
}

.mind-compass header h1,
.mind-compass h2,
.mind-compass h3,
.mind-compass h4,
.mind-compass .hero-title,
.mind-compass .activity-card h4,
#stressTab h2,
#stressTab h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0;
}

.mind-compass header h1,
.mind-compass header p {
    color: inherit;
}

.card h2,
.card h3 {
    color: var(--text-primary) !important;
}

a {
    color: var(--accent-link);
}

a:hover {
    color: var(--accent-hover);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -48px;
    z-index: 10000;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.skip-link:focus {
    top: 12px;
}

code, kbd {
    font-family: var(--font-mono);
    font-size: 12px;
}

.mono-label,
.kicker,
.badge {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border-accent);
    background: var(--surface-primary);
    color: var(--accent-primary);
}

.brand-mark svg {
    width: 16px;
    height: 16px;
    display: block;
}

.app-container {
    background: var(--surface-canvas) !important;
}

.sidebar {
    background: var(--surface-primary) !important;
    border-right: 1px solid var(--border-default) !important;
    color: var(--text-primary);
}

.sidebar-header {
    border-bottom: 1px solid var(--border-subtle) !important;
}

.sidebar-logo {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    gap: 10px !important;
}

.sidebar-item,
.sidebar-group-toggle {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    border: 1px solid transparent;
}

.sidebar-item:hover,
.sidebar-group-toggle:hover,
.sidebar-group.open > .sidebar-group-toggle {
    background: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

.sidebar-item.active {
    background: rgba(15, 157, 110, 0.12) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--border-accent) !important;
    box-shadow: none !important;
}

.header,
.dashboard-header,
.class-selector {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-default);
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.login-shell .header {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-bottom: var(--space-5) !important;
}

.header h1,
.header-title,
.dashboard-header h1,
.dashboard-header p,
.class-selector h2 {
    color: var(--text-primary) !important;
}

.header-divider {
    background: var(--border-default) !important;
}

.hamburger span {
    background: var(--text-primary) !important;
}

.back-button {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

.back-button i {
    color: var(--text-primary) !important;
}

.card,
.stat-card,
.dashboard-container .card {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
    color: var(--text-primary);
}

.card:hover,
.stat-card:hover {
    box-shadow: none !important;
    border-color: var(--border-strong) !important;
}

.card-header,
.card-footer {
    border-color: var(--border-subtle) !important;
    background: var(--surface-elevated) !important;
}

.stat-card {
    background: var(--surface-primary) !important;
    border: 1px solid var(--border-default) !important;
}

footer {
    background: var(--surface-primary) !important;
    border-top: 1px solid var(--border-default) !important;
}

footer p {
    color: var(--text-tertiary) !important;
}

.main-wrapper,
.main-content {
    background: var(--surface-canvas);
}

.btn,
button.btn {
    font-family: var(--font-sans);
    font-weight: 500;
    transition: transform var(--motion-micro), opacity var(--motion-micro), border-color var(--motion-micro), background-color var(--motion-micro);
}

.btn-primary,
.btn {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--text-primary) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
}

.btn-primary:hover:not(:disabled),
.btn:hover:not(:disabled) {
    transform: scale(1.01);
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

.btn-primary:active:not(:disabled),
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-secondary,
.btn-sm,
.btn-export,
.header-actions .btn,
.header-actions .btn-secondary {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

.btn-secondary:hover:not(:disabled),
.header-actions .btn:hover {
    border-color: var(--border-strong) !important;
    background: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

.btn-ghost {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--accent-link) !important;
    font-size: 14px !important;
    font-weight: 500;
    padding: var(--space-3) var(--space-2) !important;
    margin: var(--space-1) 0 0 !important;
    min-height: 44px;
    height: auto !important;
    border-radius: 0 !important;
}

.btn-ghost:hover:not(:disabled) {
    background: transparent !important;
    color: var(--accent-hover) !important;
}

.btn-ghost:focus-visible {
    box-shadow: var(--focus-ring) !important;
    border-radius: var(--radius-sm) !important;
}

.btn-google {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--text-primary) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 500;
    min-height: 44px;
    height: auto !important;
    padding: 8px 32px !important;
}

.btn-google:hover:not(:disabled) {
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    background: var(--surface-primary) !important;
}

.btn-google:focus-visible {
    box-shadow: var(--focus-ring) !important;
}

.login-code-row .btn-secondary {
    font-size: 14px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 var(--space-4) !important;
    margin: 0 !important;
    border-radius: var(--radius-sm) !important;
}

.btn-success {
    background: var(--surface-primary) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--border-accent) !important;
}

.btn-danger,
.btn-warning {
    background: var(--surface-primary) !important;
    color: var(--status-error) !important;
    border: 1px solid rgba(240, 113, 120, 0.4) !important;
}

.btn-warning {
    color: var(--status-warning) !important;
    border-color: rgba(232, 197, 71, 0.4) !important;
}

.btn-info {
    background: var(--surface-primary) !important;
    color: var(--status-info) !important;
    border: 1px solid rgba(139, 156, 255, 0.35) !important;
}

.tab.active,
.nav-item.active,
.tabs .tab.active {
    background: rgba(15, 157, 110, 0.12) !important;
    color: var(--accent-primary) !important;
    border-color: var(--border-accent) !important;
    box-shadow: none !important;
}

.tabs {
    border-bottom-color: var(--border-subtle) !important;
}

.tabs .tab {
    background: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
}

.page-title {
    color: var(--text-primary) !important;
}

.page-subtitle {
    color: var(--text-secondary) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
select,
textarea {
    background-color: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
    caret-color: var(--accent-primary);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.form-group label {
    color: var(--text-secondary);
    font-weight: 500;
}

.error-message {
    background: rgba(240, 113, 120, 0.12) !important;
    color: var(--status-error) !important;
    border: 1px solid rgba(240, 113, 120, 0.35);
}

.success-message {
    background: rgba(15, 157, 110, 0.12) !important;
    color: var(--accent-primary) !important;
    border: 1px solid var(--border-accent);
}

.spinner {
    border-color: var(--border-default);
    border-top-color: var(--accent-primary);
}

.skeleton {
    background: linear-gradient(90deg, #1c1c1c 25%, #2e2e2e 50%, #1c1c1c 75%) !important;
    background-size: 200% 100% !important;
}

.school-autocomplete {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: none !important;
}

.school-autocomplete-item {
    border-bottom-color: var(--border-subtle) !important;
    color: var(--text-primary);
}

.school-autocomplete-item:hover {
    background: var(--surface-secondary) !important;
}

.school-autocomplete-item .school-name {
    color: var(--text-primary) !important;
}

.school-autocomplete-item .school-info {
    color: var(--text-tertiary) !important;
}

.divider {
    color: var(--text-tertiary) !important;
}

.divider::before,
.divider::after {
    border-bottom-color: var(--border-default) !important;
}

/* Login card only — dashboards also use .container as a page shell */
body:has(> .login-shell) {
    background:
        radial-gradient(circle at 12% 8%, rgba(15, 157, 110, 0.08), transparent 34%),
        var(--surface-canvas);
}

.login-shell {
    background: var(--surface-primary) !important;
    border: 1px solid var(--border-default);
    box-shadow: none !important;
    color: var(--text-primary);
}

.login-shell::before,
.login-shell::after {
    background: rgba(15, 157, 110, 0.08) !important;
}

.badge {
    background: rgba(15, 157, 110, 0.12) !important;
    color: var(--accent-primary) !important;
    font-weight: 500 !important;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    text-transform: none;
}

.header p {
    color: var(--text-secondary);
}

/* Student year selector on dark header */
#studentYearSelector {
    background: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

#studentYearSelector:hover,
#studentYearSelector:focus {
    background: var(--surface-elevated) !important;
    border-color: var(--border-accent) !important;
}

.chat-widget-btn,
.chat-header,
.chat-header-top {
    background: var(--surface-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-accent);
    box-shadow: none !important;
}

.chat-widget-btn {
    border-radius: var(--radius-pill) !important;
}

.chat-window {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-default);
    box-shadow: none !important;
}

.mobile-nav,
.bottom-nav,
.nav-bar {
    background: var(--surface-primary) !important;
    border-top: 1px solid var(--border-default) !important;
    color: var(--text-secondary);
}

#pastYearNotice,
#joinClassNotice,
#readonlyBanner {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-accent) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

#pastYearNotice span,
#joinClassNotice div,
#readonlyBanner span {
    color: var(--text-secondary) !important;
}

.tab-group-btn,
.tab-dropdown {
    background: var(--surface-primary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-default) !important;
}

.tab-dropdown .tab:hover,
.tab-group-btn:hover {
    background: var(--surface-secondary) !important;
    color: var(--text-primary) !important;
}

.nav-item {
    color: var(--text-secondary) !important;
}

table,
th,
td {
    border-color: var(--border-subtle) !important;
    color: var(--text-primary);
}

.modal,
.modal-content,
[class*="modal"] > div {
    color: var(--text-primary);
}

#headerTreeIcon {
    background: var(--surface-secondary) !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}