/*
 * Sugarcoat public website: light theme.
 *
 * Uses the :root tokens of sugarcoat-theme.css (background #fafafa, white
 * cards, black text, indigo primary). Active only when <html class="light">.
 * Loaded last, so it overrides the hard-coded dark colours in the older
 * component and page stylesheets. Remove the "light" class to go back to dark.
 */

html.light {
    color-scheme: light;
    --brand-text: var(--primary);
    --text-strong: oklch(0.2103 0 267.51);
    --text-body: oklch(0.3 0 0);
    --tint: oklch(0.9214 0.0248 257.65);          /* chart-1 */
    --tint-text: oklch(0.2571 0.1161 272.24);     /* chart-5 */
    --panel-shadow: 0 18px 48px oklch(0.2571 0.1161 272.24 / 0.10);
    --ok-text: #17663b;
    --warn-text: #8a5b00;
    --error-text: #a62c26;
}

html.light body {
    background:
        radial-gradient(ellipse at 75% 15%, oklch(0.5144 0.1605 267.44 / 0.06), transparent 38%),
        var(--background);
    color: var(--foreground);
}

html.light ::selection {
    background: var(--primary);
    color: var(--primary-foreground);
}

/* ---------- Navigation ---------- */

html.light .navbar {
    border-bottom-color: var(--border);
    background: oklch(0.9851 0 0 / 0.92);
}

html.light .navbar__links > a,
html.light .nav-menu__trigger {
    color: var(--text-strong);
}

html.light .navbar__links > a:hover,
html.light .nav-menu__trigger:hover,
html.light .navbar__logo span,
html.light .footer__logo span,
html.light .hero__accent,
html.light .mega-menu__primary-link {
    color: var(--primary);
}

html.light .mega-menu {
    border-color: var(--border);
    background: var(--card);
    box-shadow: 0 26px 70px oklch(0.2571 0.1161 272.24 / 0.14);
}

html.light .mega-menu__intro {
    background:
        radial-gradient(circle at 20% 8%, oklch(0.5144 0.1605 267.44 / 0.10), transparent 65%),
        var(--muted);
}

html.light .mega-menu__item strong {
    color: var(--foreground);
}

html.light .navbar__toggle span {
    background: var(--foreground);
}

html.light .navbar__mobile-signin {
    background: var(--muted);
}

html.light .navbar__mobile-signin:hover,
html.light .navbar__mobile-signin:focus-visible {
    color: var(--primary);
}

/* ---------- Buttons ---------- */

html.light .button--primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

html.light .button--primary:hover {
    background: var(--brand-primary-hover);
}

html.light .button--secondary {
    border-color: oklch(0.85 0 0);
    background: var(--card);
    color: var(--foreground);
}

html.light .anti-metal-button {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 0 1px var(--border),
        0 4px 12px oklch(0.2571 0.1161 272.24 / 0.12);
}

/* ---------- Home hero (gravity stars) ---------- */

html.light .hero[data-gravity-stars] {
    background:
        radial-gradient(ellipse at 82% 38%, oklch(0.5144 0.1605 267.44 / 0.12), transparent 55%),
        radial-gradient(ellipse at 12% 82%, oklch(0.6083 0.1247 272.72 / 0.08), transparent 57%),
        var(--background);
}

html.light .hero[data-gravity-stars]::after {
    background: none;
}

html.light .hero__title span,
html.light .hero[data-gravity-stars] .hero__title span,
html.light .section-heading h2 span {
    color: oklch(0.55 0 0);
}

html.light .hero[data-gravity-stars] .hero__description,
html.light .hero[data-gravity-stars] .hero__philosophy {
    color: var(--muted-foreground);
}

/* ---------- Product mock-ups (dashboards and screens) ---------- */

html.light .dashboard,
html.light .hero[data-gravity-stars] .dashboard,
html.light .industry-dashboard,
html.light .re-dashboard,
html.light .edu-dashboard,
html.light .hc-dashboard,
html.light .product-ai__terminal,
html.light .pricing-core-ui,
html.light .contact-form-card,
html.light .pipeline-columns > div,
html.light .edu-admission-ui,
html.light .edu-student-ui,
html.light .edu-attendance-ui,
html.light .edu-assessment-ui,
html.light .edu-fees-ui,
html.light .edu-placement-ui,
html.light .edu-analytics-ui,
html.light .edu-ai-ui,
html.light .hc-appointment-ui,
html.light .hc-resource-ui,
html.light .hc-billing-ui,
html.light .hc-followup-ui,
html.light .hc-analytics-ui,
html.light .hc-ai-ui,
html.light .re-inventory-ui,
html.light .re-visits-ui,
html.light .re-broker-ui,
html.light .re-booking-ui,
html.light .re-analytics-ui,
html.light .re-ai-ui,
html.light .pricing-component,
html.light .pricing-steps article {
    border-color: var(--border);
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--panel-shadow);
}

html.light .dashboard__panel,
html.light .dashboard-pipeline,
html.light .dashboard-inventory,
html.light .edu-ai-answer,
html.light .hc-ai-answer,
html.light .re-ai-response {
    border-color: var(--border);
    background: var(--muted);
}

html.light .ai-result,
html.light .terminal-answer,
html.light .connection-os {
    background: var(--tint);
    color: var(--tint-text);
}

html.light .os-visual__center {
    background: radial-gradient(circle, oklch(0.5144 0.1605 267.44 / 0.14), var(--card));
}

html.light .os-visual::after {
    border-color: var(--border);
}

html.light .architecture-map__core {
    background: radial-gradient(circle, oklch(0.5144 0.1605 267.44 / 0.10), var(--card) 70%);
}

/* Progress tracks and bars */
html.light .edu-course-attendance i,
html.light .edu-collection-progress > i,
html.light .edu-performance-breakdown i,
html.light .hc-resource-list i,
html.light .hc-collection i,
html.light .hc-service-analytics i,
html.light .re-inventory__bar,
html.light .re-payment-progress__track,
html.light .re-source > i {
    background: var(--border);
}

/* ---------- Section bands that were dark ---------- */

html.light .product-capability--alt,
html.light .industry-inventory,
html.light .pricing-model,
html.light .pricing-implementation,
html.light .edu-admission-product,
html.light .edu-attendance-product,
html.light .edu-fees-product,
html.light .edu-analytics,
html.light .hc-appointment-product,
html.light .hc-billing-product,
html.light .hc-analytics,
html.light .re-property,
html.light .re-brokers,
html.light .re-analytics {
    background: var(--muted);
}

html.light .ai-section,
html.light .product-ai,
html.light .industry-ai,
html.light .edu-ai,
html.light .hc-ai,
html.light .re-ai {
    background:
        radial-gradient(ellipse at 78% 42%, oklch(0.5144 0.1605 267.44 / 0.10), transparent 48%),
        var(--muted);
}

/* Former light sections become white bands, so the page keeps its rhythm. */
html.light .section--light,
html.light .philosophy,
html.light .product-architecture,
html.light .product-industries,
html.light .pricing-industries,
html.light .industry-workflow,
html.light .industry-outcomes,
html.light .edu-workflow,
html.light .hc-workflow,
html.light .re-workflow {
    border-block: 1px solid var(--border);
    background: var(--card);
}

html.light .footer {
    border-top-color: var(--border);
    background: var(--card);
}

html.light .footer__column h4 {
    color: var(--foreground);
}

/* ---------- Text that was white or near-white ---------- */

html.light .pipeline-row strong,
html.light .dashboard-pipeline strong,
html.light .workflow-card__arrow,
html.light .inventory-row strong,
html.light .architecture-map__logo,
html.light .pricing-faq summary,
html.light .edu-pipeline-row strong,
html.light .edu-lead-row strong,
html.light .edu-attendance-numbers strong,
html.light .edu-assessment-row strong,
html.light .edu-fee-row strong,
html.light .edu-placement-row strong,
html.light .edu-ai-question,
html.light .hc-table-row strong,
html.light .hc-resource-numbers strong,
html.light .hc-bill-row strong,
html.light .hc-ai-question,
html.light .re-pipeline__row strong,
html.light .re-property-row strong,
html.light .re-broker-row strong,
html.light .re-ai-message {
    color: var(--foreground);
}

html.light .ai-prompt,
html.light .industry-ai__prompts > div,
html.light .industry-feature-copy li,
html.light .capability-list li,
html.light .os-node,
html.light .terminal-query p,
html.light .pricing-component li,
html.light .contact-field label,
html.light .edu-feature-list > div,
html.light .edu-ai-answer button,
html.light .hc-feature-list > div,
html.light .hc-ai-answer-head,
html.light .hc-ai-answer button,
html.light .re-feature-list > div,
html.light .re-ai-response__top,
html.light .re-ai-response button {
    color: var(--text-body);
}

html.light .terminal-answer p {
    color: var(--tint-text);
}

/* Light blue labels become the primary indigo */
html.light .inventory-status,
html.light .site-visit-ui article small,
html.light .pricing-component__icon,
html.light .pricing-config-link,
html.light .edu-stats small,
html.light .edu-badge,
html.light .edu-badge--active,
html.light .edu-avatar,
html.light .edu-activity-icon,
html.light .edu-analytics-stats small,
html.light .edu-ai-result small,
html.light .hc-stats small,
html.light .hc-badge,
html.light .hc-followup-icon,
html.light .hc-analytics-stats small,
html.light .hc-ai-result small,
html.light .re-stat small,
html.light .re-badge,
html.light .re-analytics-top small,
html.light .re-ai-result small {
    color: var(--primary);
}

/* Status colours readable on white */
html.light .edu-badge--success,
html.light .hc-badge--active,
html.light .re-badge--available,
html.light .re-payment-state--paid,
html.light .contact-success__icon {
    color: var(--ok-text);
}

html.light .hc-badge--waiting {
    color: var(--warn-text);
}

html.light .re-badge--booked {
    border-color: var(--border);
    background: var(--muted);
    color: var(--muted-foreground);
}

html.light .contact-error,
html.light .contact-form-errors {
    color: var(--error-text);
}

/* ---------- Forms ---------- */

html.light .contact-field input,
html.light .contact-field select,
html.light .contact-field textarea {
    border-color: oklch(0.85 0 0);
    background: var(--card);
    color: var(--foreground);
}

html.light .contact-field input:focus,
html.light .contact-field select:focus,
html.light .contact-field textarea:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px oklch(0.5144 0.1605 267.44 / 0.18);
}

/* ---------- Tags ---------- */

html.light .coming-soon-tag {
    width: max-content;
    max-width: 100%;
    background: var(--tint);
    color: var(--tint-text);
}

html.light .sample-data-tag,
html.light .dashboard::after,
html.light .re-dashboard::after,
html.light .edu-dashboard::after,
html.light .hc-dashboard::after,
html.light .industry-dashboard::after {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.92);
    color: var(--muted-foreground);
}

html.light .live-today__grid li {
    border-color: var(--border);
    background: var(--card);
}

html.light .live-today__intro,
html.light .live-today__grid span,
html.light .live-today__note {
    color: var(--muted-foreground);
}

html.light a:focus-visible,
html.light button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 4px;
}