/* StudioFold Sunroom palette
   --------------------------------------------------------------------------
   Shared colour-only theme for the CRM UI. Change these tokens to recolour
   every linked page; component layout, typography and motion remain owned by
   each page's existing stylesheets.

   Important: document/PDF design canvases keep their saved branding colours.
*/
:root {
  --sf-sunroom-canvas: #aeb5c0;
  --sf-sunroom-paper: #fffdf5;
  --sf-sunroom-paper-soft: #f6f2e5;
  --sf-sunroom-paper-muted: #eeeade;
  --sf-sunroom-ink: #292927;
  --sf-sunroom-muted: #77766e;
  --sf-sunroom-line: rgba(45, 45, 42, .13);
  --sf-sunroom-charcoal: #2c2c2a;
  --sf-sunroom-charcoal-soft: #3a3936;
  --sf-sunroom-yellow: #ffd64d;
  --sf-sunroom-yellow-strong: #efc42e;
  --sf-sunroom-yellow-soft: #fff0aa;
  --sf-sunroom-neutral: #e9e6dc;
  --sf-sunroom-sage: var(--sf-sunroom-neutral);
  --sf-sunroom-success: var(--sf-sunroom-charcoal);
  --sf-sunroom-danger: var(--sf-sunroom-charcoal);
  --sf-sunroom-gradient:
    radial-gradient(circle at 93% 3%, rgba(255, 222, 91, .58), transparent 29%),
    radial-gradient(circle at 24% 102%, rgba(255, 248, 217, .9), transparent 38%),
    linear-gradient(135deg, #f5f3e9 0%, #fffdf4 52%, #f8edbb 100%);
  --sf-sunroom-shadow: 0 20px 54px rgba(59, 54, 38, .11);
  --sf-sunroom-shadow-soft: 0 10px 28px rgba(59, 54, 38, .07);
  /* CRM2 semantic bridge */
  --crm2-cloud: var(--sf-sunroom-paper-soft) !important;
  --crm2-mist: var(--sf-sunroom-paper-muted) !important;
  --crm2-surface: var(--sf-sunroom-paper) !important;
  --crm2-slate: var(--sf-sunroom-charcoal) !important;
  --crm2-ink: var(--sf-sunroom-ink) !important;
  --crm2-muted: var(--sf-sunroom-muted) !important;
  --crm2-line: var(--sf-sunroom-line) !important;
  --crm2-teal: var(--sf-sunroom-yellow-strong) !important;
  --crm2-teal-deep: var(--sf-sunroom-charcoal) !important;
  --crm2-teal-soft: var(--sf-sunroom-yellow-soft) !important;
  --crm2-ochre: var(--sf-sunroom-yellow) !important;
  --crm2-ochre-soft: var(--sf-sunroom-yellow-soft) !important;
  --crm2-sage: var(--sf-sunroom-neutral) !important;
  --crm2-shadow: var(--sf-sunroom-shadow) !important;

  /* Legacy semantic bridge */
  --canvas: var(--sf-sunroom-paper-soft) !important;
  --paper: var(--sf-sunroom-paper-soft) !important;
  --paper-deep: var(--sf-sunroom-paper-muted) !important;
  --surface: var(--sf-sunroom-paper) !important;
  --surface-soft: var(--sf-sunroom-paper-muted) !important;
  --sidebar: var(--sf-sunroom-charcoal) !important;
  --white: var(--sf-sunroom-paper) !important;
  --ink: var(--sf-sunroom-ink) !important;
  --ink-deep: var(--sf-sunroom-charcoal) !important;
  --muted: var(--sf-sunroom-muted) !important;
  --line: var(--sf-sunroom-line) !important;
  --soft: var(--sf-sunroom-paper-muted) !important;
  --green: var(--sf-sunroom-charcoal) !important;
  --green-2: var(--sf-sunroom-yellow-strong) !important;
  --green-soft: var(--sf-sunroom-yellow-soft) !important;
  --teal-soft: var(--sf-sunroom-yellow-soft) !important;
  --evergreen: var(--sf-sunroom-charcoal) !important;
  --moss: var(--sf-sunroom-muted) !important;
  --accent: var(--sf-sunroom-charcoal) !important;
  --accent-2: var(--sf-sunroom-yellow-strong) !important;
  --indigo: var(--sf-sunroom-charcoal) !important;
  --purple: var(--sf-sunroom-charcoal) !important;
  --lime: var(--sf-sunroom-yellow-soft) !important;
  --mimosa: var(--sf-sunroom-yellow) !important;
  --mimosa-soft: var(--sf-sunroom-yellow-soft) !important;
  --ochre: var(--sf-sunroom-yellow-strong) !important;
  --clay: var(--sf-sunroom-yellow) !important;
  --shadow: var(--sf-sunroom-shadow) !important;

  /* Landing-page semantic bridge */
  --v2-bg: var(--sf-sunroom-paper-soft) !important;
  --v2-ink: var(--sf-sunroom-ink) !important;
  --v2-muted: var(--sf-sunroom-muted) !important;
  --v2-indigo: var(--sf-sunroom-charcoal) !important;
  --v2-indigo-dark: var(--sf-sunroom-charcoal) !important;
  --v2-lilac: var(--sf-sunroom-yellow-soft) !important;
  --v2-mint: var(--sf-sunroom-paper-muted) !important;
  --v2-yellow: var(--sf-sunroom-yellow-soft) !important;
  --v2-coral: var(--sf-sunroom-yellow-strong) !important;
  --v2-line: var(--sf-sunroom-line) !important;
  --v2-paper: var(--sf-sunroom-paper) !important;

  /* Legal/public-page semantic bridge */
  --privacy-paper: var(--sf-sunroom-paper-soft) !important;
  --privacy-surface: var(--sf-sunroom-paper) !important;
  --privacy-ink: var(--sf-sunroom-ink) !important;
  --privacy-muted: var(--sf-sunroom-muted) !important;
  --privacy-teal: var(--sf-sunroom-charcoal) !important;
  --privacy-ochre: var(--sf-sunroom-yellow-strong) !important;
  --privacy-line: var(--sf-sunroom-line) !important;
  --privacy-soft: var(--sf-sunroom-paper-muted) !important;

  /* Authentication, beta and owner-console bridges */
  --auth-ink: var(--sf-sunroom-charcoal) !important;
  --auth-muted: var(--sf-sunroom-muted) !important;
  --auth-paper: var(--sf-sunroom-paper-soft) !important;
  --auth-line: var(--sf-sunroom-line) !important;
  --auth-ochre: var(--sf-sunroom-yellow) !important;
  --beta-ink: var(--sf-sunroom-charcoal) !important;
  --beta-paper: var(--sf-sunroom-paper-soft) !important;
  --beta-muted: var(--sf-sunroom-muted) !important;
  --beta-line: var(--sf-sunroom-line) !important;
  --beta-ochre: var(--sf-sunroom-yellow) !important;
  --owner-ink: var(--sf-sunroom-ink) !important;
  --owner-muted: var(--sf-sunroom-muted) !important;
  --owner-paper: var(--sf-sunroom-paper-soft) !important;
  --owner-deep: var(--sf-sunroom-charcoal) !important;
  --owner-ochre: var(--sf-sunroom-yellow) !important;
  --owner-line: var(--sf-sunroom-line) !important;
}

/* Keep the same two-colour identity if a legacy theme flag is present. */
html[data-theme="dark"] {
  --crm2-cloud: var(--sf-sunroom-paper-soft) !important;
  --crm2-mist: var(--sf-sunroom-paper-muted) !important;
  --crm2-surface: var(--sf-sunroom-paper) !important;
  --crm2-slate: var(--sf-sunroom-charcoal) !important;
  --crm2-ink: var(--sf-sunroom-ink) !important;
  --crm2-muted: var(--sf-sunroom-muted) !important;
  --crm2-line: var(--sf-sunroom-line) !important;
  --crm2-teal: var(--sf-sunroom-yellow-strong) !important;
  --crm2-teal-deep: var(--sf-sunroom-charcoal) !important;
  --crm2-teal-soft: var(--sf-sunroom-yellow-soft) !important;
  --crm2-ochre: var(--sf-sunroom-yellow) !important;
  --crm2-ochre-soft: var(--sf-sunroom-yellow-soft) !important;
  --crm2-sage: var(--sf-sunroom-neutral) !important;
}

html,
body {
  color: var(--sf-sunroom-ink) !important;
  background-color: var(--sf-sunroom-paper-soft) !important;
}

/* Raw legacy colour exceptions in shared UI chrome. */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--sf-sunroom-yellow-strong) !important;
  box-shadow: 0 0 0 3px rgba(239, 196, 46, .2) !important;
}

.event-tag.category-engagement,
.event-tag.engagement,
.event-tag.category-corporate,
.event-tag.corporate,
.event-tag.category-portrait,
.event-tag.portrait,
.action-icon.clay,
.action-icon.ochre {
  color: var(--sf-sunroom-charcoal) !important;
  background: var(--sf-sunroom-yellow-soft) !important;
}

/* Recolour editor chrome, never the saved document artwork itself. */
.document-editor-page .document-topbar,
.quotation-editor-page .document-topbar,
.quotation-editor-page .studio-topbar,
.document-editor-page .editor-panel,
.quotation-editor-page .editor-panel,
.quotation-editor-page .studio-sidebar,
.quotation-editor-page .studio-controls {
  color: var(--sf-sunroom-ink) !important;
  background-color: var(--sf-sunroom-paper) !important;
  border-color: var(--sf-sunroom-line) !important;
}

/* Errors remain readable without introducing a third brand colour. */
.error,
.error-message,
.form-error,
.toast.error,
.toast.is-error,
[role="alert"] {
  color: var(--sf-sunroom-charcoal) !important;
  background-color: var(--sf-sunroom-yellow-soft) !important;
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

/* Standalone authentication and account-access screens. */
.auth-form-side,
.beta-welcome-content,
.owner-login-panel,
.account-access-shell,
.account-access-content {
  color: var(--sf-sunroom-ink) !important;
  background-color: var(--sf-sunroom-paper) !important;
}

.auth-art,
.beta-welcome-art,
.owner-login-intro,
.account-access-art {
  color: var(--sf-sunroom-paper) !important;
  background-color: var(--sf-sunroom-charcoal) !important;
}

.auth-art-copy p,
.beta-welcome-hero > p:last-child,
.owner-login-copy span,
.account-access-statement > p:last-child,
.auth-art-foot,
.beta-welcome-art > small,
.owner-login-intro > small,
.account-access-art > small {
  color: rgba(255, 253, 245, .62) !important;
}

.auth-art-copy h1 em,
.beta-welcome-hero h1 em,
.owner-login-copy h1 em,
.account-access-statement h1 em,
.beta-kicker,
.owner-login-copy p,
.owner-login-kicker,
.account-access-kicker {
  color: var(--sf-sunroom-yellow) !important;
}

.auth-primary,
.owner-login-card button,
.account-access-primary,
.beta-primary {
  color: var(--sf-sunroom-paper) !important;
  background-color: var(--sf-sunroom-charcoal) !important;
}

.auth-primary:hover,
.owner-login-card button:hover,
.account-access-primary:hover,
.beta-primary:hover {
  background-color: var(--sf-sunroom-charcoal-soft) !important;
}

.auth-success,
.account-access-status.is-success,
.owner-form-status.is-success {
  color: var(--sf-sunroom-charcoal) !important;
  background-color: var(--sf-sunroom-yellow-soft) !important;
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

.account-access-icon,
.account-access-note,
.setup-note,
.auth-invite-note,
.owner-login-note {
  color: var(--sf-sunroom-charcoal) !important;
  background-color: var(--sf-sunroom-yellow-soft) !important;
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

.account-access-card h2,
.account-access-card > p strong,
.account-access-secondary,
.account-access-link,
.account-access-back {
  color: var(--sf-sunroom-charcoal) !important;
}

/* Owner-console surfaces and states. */
body.owner-admin-page,
.owner-shell {
  color: var(--sf-sunroom-ink) !important;
  background-color: var(--sf-sunroom-paper-soft) !important;
}

.owner-card,
.owner-metric,
.owner-table-wrap,
.owner-remove-dialog-card,
.owner-exit,
.owner-button,
.owner-form input,
.owner-form select,
.owner-form textarea,
.owner-table select,
.owner-table button {
  background-color: var(--sf-sunroom-paper) !important;
  border-color: var(--sf-sunroom-line) !important;
}

.owner-tabs button.active,
.owner-button.primary,
.owner-avatar,
.owner-pill {
  color: var(--sf-sunroom-paper) !important;
  background-color: var(--sf-sunroom-charcoal) !important;
}

.owner-nav a.active,
.owner-nav a:hover,
.owner-pill.paused,
.email-preview-button,
.email-preview-expiry,
.email-preview-support {
  color: var(--sf-sunroom-charcoal) !important;
  background-color: var(--sf-sunroom-yellow-soft) !important;
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

.owner-remove-icon,
.owner-button.danger,
.owner-table .owner-remove-user:hover {
  color: var(--sf-sunroom-paper) !important;
  background-color: var(--sf-sunroom-charcoal) !important;
  border-color: var(--sf-sunroom-charcoal) !important;
}

.owner-remove-scope,
.owner-table .owner-remove-user,
.owner-form-status.is-error {
  color: var(--sf-sunroom-charcoal) !important;
  background-color: var(--sf-sunroom-yellow-soft) !important;
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

/* Legal and policy pages contain a late legacy colour block. */
.privacy-nav,
.privacy-intro,
.privacy-section + .privacy-section,
.privacy-callout,
.privacy-footer {
  border-color: var(--sf-sunroom-line) !important;
}

.privacy-brand,
.privacy-intro h1,
.privacy-meta strong,
.privacy-section h2,
.privacy-section h3,
.privacy-section strong {
  color: var(--sf-sunroom-ink) !important;
}

.privacy-lede,
.privacy-meta span,
.privacy-contents p,
.privacy-contents a,
.privacy-section p,
.privacy-section ul,
.privacy-callout,
.privacy-footer {
  color: var(--sf-sunroom-muted) !important;
}

.privacy-mark,
.privacy-nav a:last-child,
.privacy-eyebrow,
.privacy-section-label,
.privacy-footer a {
  color: var(--sf-sunroom-charcoal) !important;
  border-color: var(--sf-sunroom-charcoal) !important;
}

.privacy-meta {
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

.privacy-draft {
  color: var(--sf-sunroom-charcoal) !important;
  background-color: var(--sf-sunroom-yellow-soft) !important;
  border-color: var(--sf-sunroom-yellow-strong) !important;
}

/* Projects: replace the final hard-coded green card treatments. */
.project-summary > a,
.project-detail {
  color: var(--sf-sunroom-paper) !important;
  background: var(--sf-sunroom-charcoal) !important;
  border-color: var(--sf-sunroom-charcoal) !important;
}

.project-summary > a small,
.project-detail time span,
.project-detail .detail-location,
.project-progress > div,
.project-detail dt {
  color: rgba(255, 253, 245, .66) !important;
}

.project-row.active,
.project-row .project-status,
.project-row .project-status.attention {
  color: var(--sf-sunroom-charcoal) !important;
  background: var(--sf-sunroom-yellow-soft) !important;
}

.project-row:hover:not(.active) {
  background: var(--sf-sunroom-paper-soft) !important;
}

/* Public chrome uses the published, stable asset on the first CSS paint.
   Firebase still supplies the saved size and supports older logo records. */
.landing-v2 .landing-logo,
.auth-logo,
.privacy-brand,
.beta-welcome-brand,
.owner-login-brand {
  background-image: url("https://firebasestorage.googleapis.com/v0/b/studiofold-fc585.firebasestorage.app/o/siteBranding%2Fpublic%2Fcurrent.png?alt=media&v=20260913-public-first-paint-2") !important;
  filter: none !important;
}

.auth-art .auth-logo,
.account-access-art .auth-logo,
.beta-welcome-art .beta-welcome-brand {
  filter: none !important;
}

/* Booked calendar dates should stand apart from unassigned days. */
.calendar-shell > .main .calendar-day.assigned,
html[data-theme="dark"] .calendar-shell > .main .calendar-day.assigned {
  color: var(--sf-sunroom-charcoal) !important;
  background: var(--sf-sunroom-yellow) !important;
}

.calendar-shell > .main .calendar-day.assigned:hover,
html[data-theme="dark"] .calendar-shell > .main .calendar-day.assigned:hover {
  background: var(--sf-sunroom-yellow-strong) !important;
}