/* Shared color and interaction system — loaded after layout and typography. */

:root {
  --color-primary: #7448a9;
  --color-primary-hover: #5e358e;
  --color-primary-pressed: #4b2873;
  --color-accent: #ad55bd;
  --color-accent-warm: #d38a5b;
  --color-ink: #30263d;
  --color-ink-strong: #221b33;
  --color-muted: #6f6478;
  --color-subtle: #746a7d;
  --color-page: #fbfaff;
  --color-surface: #fff;
  --color-surface-soft: #f7f3fa;
  --color-surface-violet: #f1eaf8;
  --color-border: #e4dcea;
  --color-border-strong: #cdbbdb;
  --color-focus: #7448a933;
  --color-success: #35754b;
  --color-success-soft: #e8f5ec;
  --color-warning: #765820;
  --color-warning-soft: #fff8e7;
  --color-danger: #9a4253;
  --color-danger-soft: #fff2f4;
  --color-disabled-bg: #ddd6e3;
  --color-disabled-text: #655b6d;
}

html {
  color-scheme: light;
}

::selection {
  background: #d9c5eb;
  color: var(--color-ink-strong);
}

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

:is(input, select, textarea):focus {
  border-color: var(--color-primary);
}

:is(button, input, select, textarea):disabled,
:is(button, a)[aria-disabled="true"] {
  border-color: var(--color-border-strong);
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

/* Public landing and pricing navigation */
.lenspire-site {
  background-color: var(--color-page);
  color: var(--color-ink);
}

.lenspire-site .ls-nav {
  border-color: var(--color-border);
  background-color: #fbfafff2;
}

.lenspire-site :is(.ls-desktop-nav, .ls-nav-links) > a,
.lenspire-site .ls-nav-item > button {
  color: var(--color-ink);
}

.lenspire-site :is(.ls-desktop-nav, .ls-nav-links) > a:hover,
.lenspire-site .ls-nav-item > button:hover,
.lenspire-site :is(.ls-desktop-nav, .ls-nav-links) > a[aria-current="page"] {
  color: var(--color-primary-hover);
}

.lenspire-site .ls-brand-lockup > span,
.lenspire-site .ls-proof span,
.lenspire-site .ls-trust span,
.lenspire-site .ls-strip span,
.lenspire-site .ls-footer-bottom,
.lenspire-site .ls-footer-brand > p {
  color: var(--color-muted);
}

.lenspire-site :is(
  .ls-preview-main > .ls-preview-stages small,
  .ls-demo-field > span,
  .ls-dropzone small,
  .ls-table > span
) {
  color: var(--color-muted);
}

.lenspire-site .ls-table > span:last-child {
  color: var(--color-success);
}

.lenspire-site .ls-product-preview aside {
  color: var(--color-muted);
}

.lenspire-site .ls-ai-art-top b {
  color: #285a39;
}

.lenspire-site :is(.ls-primary, .ls-demo, .ls-login, .ls-dark-button) {
  background: linear-gradient(100deg, #673aa4, #9644ba);
  color: #fff;
}

.lenspire-site :is(.ls-primary, .ls-demo, .ls-login, .ls-dark-button):hover {
  background: linear-gradient(100deg, var(--color-primary-pressed), var(--color-primary-hover));
  color: #fff;
}

.lenspire-site :is(.ls-primary, .ls-demo, .ls-login, .ls-dark-button)[aria-disabled="true"] {
  border-color: var(--color-border-strong);
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  pointer-events: none;
}

.lenspire-site :is(.ls-primary, .ls-demo, .ls-login, .ls-dark-button):active {
  background: var(--color-primary-pressed);
}

.lenspire-site :is(.ls-text-link, .ls-note-grid a, .ls-faq-list a, .ls-footer-rich a) {
  color: #694095;
}

.lenspire-site :is(.ls-text-link, .ls-note-grid a, .ls-faq-list a, .ls-footer-rich a):hover {
  color: var(--color-primary-pressed);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lenspire-site :is(
  .ls-hero-copy,
  .ls-experience-intro,
  .ls-experience-copy,
  .ls-gallery-heading,
  .ls-gallery-cards,
  .ls-ai-copy,
  .ls-capability-heading,
  .ls-capability-grid,
  .ls-studio-showcase-copy,
  .ls-event-engagement-heading,
  .ls-engagement-grid,
  .ls-steps,
  .ls-workflow-proof,
  .ls-notes-heading,
  .ls-note-grid,
  .ls-faq-heading,
  .ls-faq-list
) p:not(.ls-kicker) {
  color: var(--color-muted);
}

.lenspire-site :is(
  .ls-audience-grid article,
  .ls-gallery-cards article,
  .ls-capability-grid article,
  .ls-engagement-grid article,
  .ls-steps article,
  .ls-note-grid article,
  .ls-capability-detail,
  .ls-faq-list details
) {
  border-color: var(--color-border);
}

.lenspire-site :is(
  .ls-audience-grid article,
  .ls-gallery-cards article,
  .ls-capability-grid article,
  .ls-engagement-grid article,
  .ls-steps article,
  .ls-note-grid article
):hover {
  border-color: var(--color-border-strong);
}

.lenspire-site .ls-capability-tabs {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
}

.lenspire-site .ls-capability-tabs button {
  color: var(--color-muted);
}

.lenspire-site .ls-capability-tabs button[aria-selected="true"] {
  background: var(--color-primary);
  color: #fff;
}

.lenspire-site .ls-capability-tabs button:hover:not([aria-selected="true"]) {
  background: var(--color-surface-violet);
  color: var(--color-primary-hover);
}

.lenspire-site .ls-demo-field,
.lenspire-site .ls-demo-share,
.lenspire-site .ls-studio-signature,
.lenspire-site .ls-ai-match {
  border-color: var(--color-border);
}

.lenspire-site :is(.ls-demo-field, .ls-demo-share, .ls-ai-match) :is(span, small) {
  color: var(--color-muted);
}

.lenspire-site .ls-pricing-card :is(h2, p, .ls-text-link) {
  color: #fff;
}

.lenspire-site .ls-pricing-card {
  background: linear-gradient(110deg, #45276f, #713b8c 58%, #8f4f6e 150%);
}

.lenspire-site .ls-pricing-card .ls-kicker {
  color: #f0ddff;
}

.lenspire-site .ls-cta :is(h2, p, a) {
  color: #fff;
}

.lenspire-site .ls-cta {
  background: linear-gradient(104deg, #60379c, #7c3f91 57%, #8f4f6e);
}

.lenspire-site :is(
  .ls-hero h1,
  .ls-experience h2,
  .ls-gallery-showcase h2,
  .ls-ai-showcase h2,
  .ls-capability-heading h2,
  .ls-studio-showcase h2,
  .ls-event-engagement h2,
  .ls-how h2,
  .ls-pricing h2,
  .ls-studio-notes h2
) em {
  background-image: linear-gradient(90deg, #663aa8, #a343ad, #b56d3e);
}

.lenspire-site .ls-footer-rich {
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* Login */
body.login-page {
  background: #fcfbfd;
  color: var(--color-ink-strong);
}

.login-page .login-shell {
  border-color: var(--color-border);
}

.login-page .login-intro {
  background: var(--color-surface-violet);
}

.login-page :is(.login-description, .login-highlights span, .login-card-heading > p:last-child, .signup-prompt) {
  color: var(--color-muted);
}

.login-page :is(.login-divider, .login-privacy) {
  color: var(--color-subtle);
}

.login-page .login-divider::before,
.login-page .login-divider::after {
  background: var(--color-border);
}

.login-page :is(.field-label-row a, .signup-prompt a, .login-privacy a) {
  color: #684091;
}

.login-page :is(.field-label-row a, .signup-prompt a, .login-privacy a):hover {
  color: var(--color-primary-pressed);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-page :is(.google-button, .login-form input) {
  border-color: #cfc3dc;
  background: var(--color-surface);
}

.login-page :is(.google-button, .login-form input):hover {
  border-color: var(--color-border-strong);
}

.login-page .login-form input:focus {
  border-color: var(--color-primary);
  outline-color: var(--color-focus);
}

.login-page .login-submit {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.login-page .login-submit:hover {
  background: var(--color-primary-hover) !important;
}

.login-page .login-submit:disabled {
  border-color: var(--color-border-strong) !important;
  background: var(--color-disabled-bg) !important;
  color: var(--color-disabled-text) !important;
  cursor: not-allowed;
}

.login-page .error {
  border-color: #e4b6bf;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Legal */
.legal-shell,
.legal-nav,
.legal-footer {
  --legal-ink: var(--color-ink);
  --legal-muted: var(--color-muted);
  --legal-line: var(--color-border);
  --legal-violet: var(--color-primary);
}

.legal-updated,
.legal-footer {
  color: var(--color-muted);
}

.legal-shell a,
.legal-footer a,
.legal-login {
  color: #684091;
}

.legal-login:hover,
.legal-shell a:hover,
.legal-footer a:hover {
  color: var(--color-primary-pressed);
}

/* Public pricing */
.pricing-site {
  background: linear-gradient(180deg, var(--color-page), #f5f0f8 64%, var(--color-page));
  color: var(--color-ink);
}

.pricing-site :is(.pricing-hero > p, .public-plan-heading > p, .public-plan ul, .public-plan > small, .pricing-note p) {
  color: var(--color-muted);
}

.pricing-site .public-plan {
  border-color: var(--color-border);
  background: var(--color-surface);
}

.pricing-site .public-plan.is-featured {
  border-color: #8d67b1;
}

.pricing-site .public-plan > span {
  background: var(--color-primary);
  color: #fff;
}

.pricing-site .public-plan > p,
.pricing-site .public-plan a {
  color: #684091;
}

.pricing-site .public-plan a:hover {
  color: var(--color-primary-pressed);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pricing-site .pricing-note {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
}

.pricing-site .pricing-note span {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.pricing-site .pricing-footer {
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* Signed-in studio, event, guest, and account pages */
.studio-app {
  background: var(--color-page);
  color: var(--color-ink);
}

.studio-app .studio-nav,
.studio-app footer {
  border-color: var(--color-border);
}

.studio-app footer,
.studio-app :is(
  .studio-hero,
  .studio-page-hero,
  .studio-dashboard-card,
  .event-hero,
  .event-processing,
  .event-action,
  .event-gallery,
  .event-settings-card,
  .event-settings-tool,
  .account-card,
  .subscription-hero,
  .subscription-section-heading,
  .subscription-history
) p:not(.eyebrow) {
  color: var(--color-muted);
}

.studio-app :is(
  .studio-dashboard-card,
  .studio-kpis article,
  .studio-create,
  .studio-event-card,
  .event-processing,
  .event-action,
  .event-organize-card,
  .event-settings-card,
  .event-settings-tool,
  .account-card,
  .access-card,
  .subscription-plan,
  .checkout-card
) {
  border-color: var(--color-border);
}

.studio-app :is(
  .studio-button,
  .event-action-cta,
  .event-action button,
  .event-settings-form button,
  .event-settings-tool form button,
  .guest-pin-card button,
  .guest-search-card button,
  .guest-upload-section button,
  .guest-download-all,
  .account-card button,
  .team-add-form button,
  .platform-create-card button,
  .access-card button,
  .access-button-link,
  .subscription-plan button
) {
  background-color: var(--color-primary);
  color: #fff;
}

.studio-app :is(
  .studio-button,
  .event-action-cta,
  .event-action button:not(:disabled),
  .event-settings-form button:not(:disabled),
  .event-settings-tool form button:not(:disabled),
  .guest-pin-card button:not(:disabled),
  .guest-search-card button:not(:disabled),
  .guest-upload-section button:not(:disabled),
  .guest-download-all,
  .account-card button:not(:disabled),
  .team-add-form button:not(:disabled),
  .platform-create-card button:not(:disabled),
  .access-card button:not(:disabled),
  .access-button-link,
  .subscription-plan button:not(:disabled)
):hover {
  filter: brightness(.9) saturate(1.04);
}

.studio-app :is(
  .event-action button,
  .event-settings-tool form button,
  .subscription-plan button
):disabled {
  border-color: var(--color-border-strong);
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  opacity: 1;
}

.studio-app .event-upload-form.is-uploading button:disabled {
  background: var(--color-primary);
  color: #fff;
  cursor: wait;
  opacity: .78;
}

.studio-app :is(input, select, textarea) {
  border-color: #d8cde2;
  background: var(--color-surface);
  color: var(--color-ink);
}

.studio-app :is(input, select, textarea):focus {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus);
}

.studio-app .success {
  border-color: #b9d9c2;
  background: var(--color-success-soft);
  color: var(--color-success);
}

.studio-app .error {
  border-color: #e4b6bf;
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.studio-app :is(.subscription-notice, .event-credit-notice) {
  border-color: #ead9b5;
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.studio-app .event-danger {
  border-color: #e4bcc3;
  background: var(--color-danger-soft);
}

.studio-app .event-danger :is(.eyebrow, h2, p, label) {
  color: var(--color-danger);
}

.studio-app .event-danger .danger-btn {
  background: var(--color-danger);
  color: #fff;
}

/* Readability audit: operational labels remain secondary without becoming faint. */
.studio-app :is(
  .studio-kpis small,
  .studio-health-item small,
  .studio-credit-figures small,
  .studio-event-card p,
  .event-kpis small,
  .event-insights-copy > p:last-child,
  .event-insight-metrics span,
  .event-upload-modes small,
  .event-upload-album small,
  .event-drop small,
  .event-watermark small,
  .event-upload-progress small,
  .event-organize-card-heading p,
  .event-empty-line,
  .event-photo .pad > span,
  .subscription-mode small,
  .subscription-meter small,
  .subscription-plan > small,
  .subscription-history-head,
  .subscription-history-empty
) {
  color: var(--color-muted);
}

.pricing-site :is(
  .public-plan > small,
  .public-plan ul,
  .public-plan-heading > p,
  .pricing-note
) {
  color: var(--color-muted);
}

.studio-app :is(
  .access-nav-meta,
  .access-alt,
  .studio-toggle small,
  .event-settings-toggle small,
  .team-heading > div > p:last-child,
  .team-member small,
  .account-hero aside span,
  .account-hero aside small
) {
  color: var(--color-muted);
}

.studio-app .studio-credit-usage li b {
  color: var(--color-warning);
}

.studio-app .subscription-history-row .status-paid {
  color: var(--color-success);
}

.studio-app .event-empty-line {
  color: var(--color-muted) !important;
}

.studio-app :is(.event-photo img, .guest-result-card img) {
  background: linear-gradient(135deg, var(--color-surface-violet), var(--color-surface-soft));
}

.studio-app :is(
  .studio-hero h1,
  .studio-page-hero h1,
  .event-hero h1,
  .event-settings-hero h1,
  .subscription-hero h1,
  .account-hero h1
) em {
  background-image: linear-gradient(90deg, #663aa8, #a343ad, #b56d3e);
}

@media (prefers-reduced-motion: no-preference) {
  .lenspire-site :is(a, button, summary),
  .login-page :is(a, button, input),
  .studio-app :is(a, button, input, select, textarea) {
    transition-property: color, background-color, border-color, box-shadow, filter;
    transition-duration: 160ms;
    transition-timing-function: ease;
  }
}

@media (forced-colors: active) {
  :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid CanvasText;
  }

  :is(button, input, select, textarea):disabled,
  :is(button, a)[aria-disabled="true"] {
    color: GrayText;
  }
}