/* CRM2 visual system
   Direction: Organic dashboard — cool mist surfaces, deep slate structure,
   ochre signal accents, and teal actions. Loaded last so every page shares
   the same tokens while preserving the existing component structure. */
:root {
  --crm2-cloud: #e7f1f1;
  --crm2-mist: #f4f9f8;
  --crm2-surface: #ffffff;
  --crm2-slate: #3d5753;
  --crm2-ink: #203b37;
  --crm2-muted: #728985;
  --crm2-line: #d2e1df;
  --crm2-teal: #2aa7a0;
  --crm2-teal-deep: #1c807b;
  --crm2-teal-soft: #d7f0ec;
  --crm2-ochre: #d9a514;
  --crm2-ochre-soft: #fff0c8;
  --crm2-sage: #c9ddd6;
  --crm2-shadow: 0 20px 54px rgba(38, 76, 70, .13);
  --canvas: var(--crm2-cloud);
  --ink: var(--crm2-ink);
  --ink-deep: #17302d;
  --muted: var(--crm2-muted);
  --line: var(--crm2-line);
  --soft: var(--crm2-mist);
  --white: var(--crm2-surface);
  --green: var(--crm2-teal-deep);
  --green-2: var(--crm2-teal);
  --green-soft: var(--crm2-teal-soft);
  --lime: #b9e2a7;
  --mimosa: var(--crm2-ochre);
  --mimosa-soft: var(--crm2-ochre-soft);
}

html[data-theme="dark"] {
  --crm2-cloud: #101827;
  --crm2-mist: #182233;
  --crm2-surface: #1f2a3a;
  --crm2-slate: #18352f;
  --crm2-ink: #edf7f4;
  --crm2-muted: #a5b8b7;
  --crm2-line: #344657;
  --crm2-teal: #35b8ae;
  --crm2-teal-deep: #257d76;
  --crm2-teal-soft: #214b47;
  --crm2-ochre: #e2b52e;
  --crm2-ochre-soft: #4b3d16;
  --crm2-sage: #31524b;
  --crm2-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  --canvas: var(--crm2-cloud);
  --ink: var(--crm2-ink);
  --ink-deep: #f4fbf9;
  --muted: var(--crm2-muted);
  --line: var(--crm2-line);
  --soft: var(--crm2-mist);
  --white: var(--crm2-surface);
  --green: var(--crm2-teal-deep);
  --green-2: var(--crm2-teal);
  --green-soft: var(--crm2-teal-soft);
  --lime: #b8e49e;
  --mimosa: var(--crm2-ochre);
  --mimosa-soft: var(--crm2-ochre-soft);
}

html,
body {
  background: var(--crm2-cloud) !important;
  color: var(--crm2-ink) !important;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif !important;
}

body::before { display: none !important; }

/* Shared shells and navigation */
.app-shell,
.document-app,
.brand-studio,
.owner-shell,
.settings-shell,
.onboarding-shell {
  background: var(--crm2-cloud) !important;
  color: var(--crm2-ink) !important;
}
.app-shell {
  border-color: var(--crm2-cloud) !important;
  box-shadow: var(--crm2-shadow) !important;
}
.sidebar,
.owner-sidebar,
.settings-sidebar {
  background: var(--crm2-slate) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #eef7f4 !important;
}
.brand,
.brand span,
.owner-brand,
.studio-wordmark { color: #f0f8f5 !important; }
.brand-mark,
.studio-logo { background: var(--crm2-ochre) !important; color: var(--crm2-slate) !important; }
.brand-mark svg,
.studio-logo svg { stroke: var(--crm2-slate) !important; }
.nav-label,
.sidebar .nav-label,
.owner-sidebar .nav-label { color: rgba(239,248,245,.58) !important; }
.nav-item,
.sidebar .nav-item,
.owner-sidebar a,
.settings-sidebar a { color: rgba(239,248,245,.78) !important; }
.nav-item:hover,
.sidebar .nav-item:hover,
.owner-sidebar a:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.nav-item.active,
.sidebar .nav-item.active,
.owner-sidebar a.active,
.settings-sidebar a.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.nav-item.active::before { background: var(--crm2-ochre) !important; }
.sidebar-footer,
.profile-card { border-color: rgba(255,255,255,.14) !important; }
.profile-card { background: rgba(0,0,0,.13) !important; }
.profile-card strong { color: #f0f8f5 !important; }
.profile-card span { color: rgba(239,248,245,.6) !important; }
.avatar,
.top-actions .avatar-button { background: var(--crm2-ochre) !important; color: var(--crm2-slate) !important; }

/* Utility chrome */
.main,
.settings-main,
.studio-main,
.document-topbar,
.studio-topbar,
.topbar { background: var(--crm2-cloud) !important; color: var(--crm2-ink) !important; border-color: var(--crm2-line) !important; }
.search,
.topbar .search,
.studio-search { color: var(--crm2-muted) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.search input,
.search input::placeholder { color: var(--crm2-muted) !important; }
.icon-button,
.round-button,
.back-button,
.doc-button,
.theme-toggle { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.icon-button:hover,
.round-button:hover,
.back-button:hover,
.doc-button:hover { color: var(--crm2-slate) !important; background: var(--crm2-ochre-soft) !important; }
.primary-button,
.dark-button,
.doc-button.primary,
.studio-actions button,
.send-menu .primary,
.owner-actions .primary { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; border-color: var(--crm2-ochre) !important; }
.primary-button:hover,
.dark-button:hover,
.doc-button.primary:hover,
.studio-actions button:hover { background: #edc03b !important; }

/* Cards, forms, summaries */
.activity-card,
.metric-card:first-child,
.plan-card,
.owner-plan-card { color: #f3fbf8 !important; background: var(--crm2-slate) !important; border-color: var(--crm2-slate) !important; }
.next-event-card,
.metric-card,
.panel,
.settings-panel,
.settings-nav,
.editor-card,
.quote-card,
.control-card,
.template-rail,
.system-summary span,
.saved-card,
.saved-quote-card,
.saved-empty,
.usage-rail,
.usage-summary,
.content-card,
.project-card,
.calendar-card {
  color: var(--crm2-ink) !important;
  background: var(--crm2-surface) !important;
  border-color: var(--crm2-line) !important;
  box-shadow: none !important;
}
.panel-heading,
.section-title,
.editor-card-header,
.quote-card-header,
.saved-card-meta,
.setting-row,
.member-row { border-color: var(--crm2-line) !important; }
h1,h2,h3,h4,h5,p,small,label,span,strong { border-color: inherit; }
.page-heading h1,
.settings-heading h1,
.document-heading h1,
.studio-heading h1,
.page-heading h2,
.panel-heading h2,
.quote-card h2,
.editor-card h2 { color: var(--crm2-ink) !important; }
.eyebrow,
.page-heading > div > p:last-child,
.document-heading p,
.studio-heading p,
.panel p,
.settings-panel p,
.saved-card p,
.saved-byline,
.next-event-footer { color: var(--crm2-muted) !important; }
.editor-grid input,
.editor-grid select,
.editor-grid textarea,
.settings-panel input,
.settings-panel select,
.settings-panel textarea,
.control-body input,
.control-body select,
.control-body textarea,
.search input { color: var(--crm2-ink) !important; background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.editor-grid input::placeholder,
.settings-panel input::placeholder,
.settings-panel textarea::placeholder,
.control-body input::placeholder { color: var(--crm2-muted) !important; }
input:focus,
select:focus,
textarea:focus { border-color: var(--crm2-teal) !important; box-shadow: 0 0 0 3px rgba(42,167,160,.16) !important; outline: none !important; }

/* Signature ochre active signal and teal states */
.nav-item.active,
.settings-nav button.active,
.settings-status,
.source-badge,
.draft-badge,
.status.confirmed,
.event-tag.category-wedding,
.event-tag.wedding { color: var(--crm2-slate) !important; background: var(--crm2-ochre-soft) !important; }
.settings-status i,
.event-progress b,
.event-progress strong,
.date-tile,
.event-tag.category-pre-wedding,
.event-tag.pre-wedding,
.status.confirmed { color: var(--crm2-teal-deep) !important; }
.settings-status i,
.event-progress b { background: var(--crm2-teal) !important; }
.event-tag.category-engagement,
.event-tag.engagement { color: #a25640 !important; background: #ffe4d8 !important; }
.event-tag.category-corporate,
.event-tag.corporate { color: #486c9b !important; background: #e2ecfb !important; }
.event-tag.category-portrait,
.event-tag.portrait { color: #9a6b12 !important; background: var(--crm2-ochre-soft) !important; }
.action-icon,
.metric-icon { color: var(--crm2-teal-deep) !important; background: var(--crm2-teal-soft) !important; }
.action-icon.clay { color: #a25640 !important; background: #ffe4d8 !important; }
.action-icon.ochre { color: #9a6b12 !important; background: var(--crm2-ochre-soft) !important; }

/* Document and quotation workspaces */
.document-switcher,
.studio-tabs,
.event-filters,
.range-switcher { background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.document-switcher a,
.studio-tabs button,
.event-filters button { color: var(--crm2-muted) !important; }
.document-switcher a.active,
.studio-tabs button.active,
.event-filters button.active { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.branding-strip { color: #f4fbf8 !important; background: var(--crm2-teal-deep) !important; }
.branding-strip a { color: #f6d974 !important; }
.paper-stage,
.studio-preview { background: var(--crm2-mist) !important; border-color: var(--crm2-line) !important; }
.document-paper,
.full-document { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; }
.paper-logo,
.doc-logo,
.doc-table th { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }
.paper-accent,
.doc-rule { background: var(--crm2-teal) !important; }
.doc-title,
.doc-section h3,
.doc-total strong { color: var(--crm2-teal-deep) !important; }

/* Tables and calendar */
table,
.team-matrix,
.expense-matrix { color: var(--crm2-ink) !important; border-color: var(--crm2-line) !important; background: var(--crm2-surface) !important; }
th { color: #f5fbf8 !important; background: var(--crm2-slate) !important; }
td { border-color: var(--crm2-line) !important; }
.calendar-month,
.calendar-grid,
.calendar-day { border-color: var(--crm2-line) !important; background: var(--crm2-surface) !important; }
.calendar-day.is-event { color: var(--crm2-slate) !important; background: var(--crm2-ochre-soft) !important; }

/* Dark mode: keep light document previews readable while the application shell changes. */
html[data-theme="dark"] .document-paper,
html[data-theme="dark"] .full-document,
html[data-theme="dark"] .preview-page { color: #203b37 !important; background: #fff !important; }
html[data-theme="dark"] .document-paper input,
html[data-theme="dark"] .full-document input { color: #203b37 !important; background: #f4f9f8 !important; }
html[data-theme="dark"] .preview-toolbar,
html[data-theme="dark"] .preview-progress { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; }
html[data-theme="dark"] .saved-empty,
html[data-theme="dark"] .empty-state { color: var(--crm2-ink) !important; background: var(--crm2-surface) !important; }

/* Landing/auth surfaces retain the new palette but remain welcoming and light by default. */
.landing-page,
.landing-shell,
.auth-page { background: var(--crm2-cloud) !important; color: var(--crm2-ink) !important; }
.landing-nav,
.hero-card,
.pricing-card,
.auth-card { background: var(--crm2-surface) !important; border-color: var(--crm2-line) !important; }
.landing-hero,
.hero-section { background: var(--crm2-slate) !important; color: #f5fbf8 !important; }
.landing-hero h1,
.hero-section h1 { color: #f5fbf8 !important; }
.landing-hero .primary-button,
.hero-section .primary-button { color: var(--crm2-slate) !important; background: var(--crm2-ochre) !important; }

@media (max-width: 820px) {
  .sidebar,
  .owner-sidebar,
  .settings-sidebar { background: var(--crm2-slate) !important; }
  .main,
  .settings-main,
  .studio-main { background: var(--crm2-cloud) !important; }
}