/* Site-wide finishing rules. Loaded after page and responsive styles. */
body { background: var(--color-background); color: var(--color-text); }
::selection { background: var(--color-primary); color: var(--color-on-primary); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
input, select, textarea { color-scheme: dark; accent-color: var(--color-primary); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]), select, textarea {
    background-color: var(--color-reading);
    color: var(--color-text);
    border-color: var(--color-control-border);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-primary); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: var(--color-error);
    background: var(--color-error-surface);
}
button:disabled, .button:disabled, [aria-disabled="true"] {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: .55;
}
.site-header { background: rgba(1, 3, 20, .96); border-bottom-color: var(--color-border); }
.site-header .site-logo img { width: 72px; height: 38px; object-fit: contain; flex-shrink: 0; }
.site-logo__subtitle { color: var(--color-text-muted); }
.site-footer { background: var(--color-background); border-top: 1px solid var(--color-border); }
.site-footer .site-logo img { width: 230px; height: auto; max-height: 175px; object-fit: contain; }
.site-footer .site-logo { max-width: 100%; }
.site-footer .site-logo__text, .site-footer .site-logo__title { display: none; }
.main-nav a[aria-current="page"] { color: var(--color-primary); }
.main-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.button--primary, .button--primary:visited {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: 0 8px 26px rgba(58, 173, 251, .15);
}
.button--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.button--outline, .button--light-outline {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: transparent;
}
.button--outline:hover, .button--light-outline:hover { background: var(--color-selected); color: var(--color-text); }
.button--red { color: var(--color-text); background: var(--color-magenta); }
.button--red:hover { color: var(--color-text); background: var(--color-magenta-hover); }
.button--dark { color: var(--color-text); background: var(--color-surface); border-color: var(--color-control-border); }
.button--dark:hover { background: var(--color-selected); }
.hero, .page-hero, .about-hero, .contact-hero, .resources-hero, .videos-hero, .projects-hero, .project-guide-hero {
    background:
        radial-gradient(ellipse at 85% 25%, rgba(16, 95, 166, .48), transparent 48%),
        radial-gradient(ellipse at 0% 75%, rgba(188, 14, 165, .12), transparent 42%),
        linear-gradient(125deg, #010314, #0f1737);
    color: var(--color-text);
}
.hero-title span { color: var(--color-primary); }
.hero-sinhala-tagline { color: var(--color-text); }
.hero-photo-card { background: rgba(16, 28, 67, .7); border-color: rgba(58, 173, 251, .3); }
.hero-photo-frame {
    background: radial-gradient(ellipse at 50% 15%, rgba(58, 173, 251, .2), transparent 55%), var(--color-surface-dark);
}
.hero-brand-mark { width: min(72%, 265px); top: 22px; filter: drop-shadow(0 0 20px rgba(58, 173, 251, .16)); }
.hero-photo-card::before { background: rgba(188, 14, 165, .14); }
.ai-orbit { border-color: rgba(58, 173, 251, .3); }
.ai-orbit::after { border-color: rgba(188, 14, 165, .25); }
.section--ash { background: var(--color-surface-alt); }
.section-label { color: var(--color-primary); }
.card { background: var(--color-surface); }
.card::before { background: linear-gradient(90deg, var(--color-primary), var(--color-blue)); }
.card:hover { border-color: var(--color-primary); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.card__link { color: var(--color-primary); }
.card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.badge--yellow { background: var(--color-gold); color: var(--color-on-primary); border-color: transparent; }
.course-feature { background: linear-gradient(120deg, var(--color-surface), var(--color-selected)); border-color: var(--color-border); }
.course-feature, .course-feature h2, .course-feature h3 { color: var(--color-text); }
.course-feature p { color: var(--color-text-muted); }
.cta-section, .final-cta, .video-final-cta, .resource-final-cta, .project-final-cta,
.contact-privacy, .about-mission {
    background: linear-gradient(120deg, var(--color-selected), var(--color-purple-surface));
    color: var(--color-text);
}
.contact-privacy span, .contact-privacy a { color: var(--color-primary); }
.contact-privacy h2, .contact-privacy p { color: var(--color-text); }
.project-final-cta .button, .resource-final-cta .button, .video-final-cta .button {
    background: var(--color-primary); color: var(--color-on-primary);
}
.project-final-cta .button:hover, .resource-final-cta .button:hover, .video-final-cta .button:hover {
    background: var(--color-primary-hover);
}
.course-feature__content .badge--yellow { background: var(--color-gold); color: var(--color-on-primary); }
.library-learning-notice > span, .dictionary-responsible-note > span,
.dictionary-mechanism-list li::before { color: var(--color-on-primary); }
.premium-heading__notice { color: var(--color-gold); }
.dictionary-entry-body, .dictionary-entry-content, .dictionary-entry-panel,
.project-guide-content { background-color: var(--color-reading); }
.dictionary-sinhala-mirror, .dictionary-full-sinhala, .dictionary-section-summary {
    background: var(--color-surface);
    border-color: var(--color-primary);
}
.dictionary-sinhala-mirror p, .dictionary-full-sinhala p { line-height: 1.85; }
.dictionary-entry-content p a, .dictionary-entry-content li a,
.project-guide-content p a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.dictionary-use-grid .is-good { border-color: var(--color-success); }
.dictionary-use-grid .is-caution { border-color: var(--color-gold); }
.contact-form-status { background: var(--color-error-surface); color: var(--color-error); }
.contact-field [aria-invalid="true"] { border-color: var(--color-error); }
.contact-prepared { border-color: var(--color-success); }
.contact-reason-grid button.is-selected { border-color: var(--color-primary); box-shadow: inset 4px 0 var(--color-primary); }
pre, code { color: var(--color-text); }
pre { background-color: var(--color-background); border-color: var(--color-border); }
/* SVG diagram surfaces and their text need separate roles. */
.algorithm-demo__cell { fill: var(--color-surface); stroke: var(--color-control-border); }
.algorithm-demo__cell.is-wall { fill: var(--color-text-muted); stroke: var(--color-text-muted); }
.algorithm-demo__cell.is-visited { fill: var(--color-selected); stroke: var(--color-primary); }
.algorithm-demo__cell.is-frontier { fill: var(--color-primary); stroke: var(--color-primary); }
.algorithm-demo__stage .is-wall + text,
.algorithm-demo__stage .is-current + text,
.algorithm-demo__stage .is-path + text,
.algorithm-demo__stage .is-frontier + text { fill: var(--color-on-primary); }
.tree-demo__tree-node rect { fill: var(--color-surface); stroke: var(--color-control-border); }
.tree-demo__tree-node.is-leaf rect { fill: var(--color-success-surface); stroke: var(--color-success); }
.tree-demo__tree-node.is-path rect { fill: var(--color-selected); stroke: var(--color-primary); }
.tree-demo__tree-node.is-selected rect { stroke: var(--color-gold); }
.dictionary-view-tabs button.is-active, .dictionary-alphabet button.is-selected {
    background: var(--color-selected); border-color: var(--color-primary);
    box-shadow: inset 0 -3px var(--color-primary);
}
@media (max-width: 1180px) {
    .main-nav.is-open { background: rgba(1, 3, 20, .99); }
}
@media (max-width: 480px) {
    .site-header .site-logo img { width: 60px; height: 32px; }
    .site-header .site-logo { gap: 9px; }
    .site-footer .site-logo img { width: 205px; }
}