/* Shared presentation layer. Load after page CSS; keep layout and state rules there. */
:root {
  color-scheme: light;
  --ink: #354239;
  --muted: #606b60;
  --paper: #fbf8f3;
  --surface: #fffdf9;
  --white: #fffdf9;
  --cream: #f4eee6;
  --sage: #e8eee4;
  --blush: #f3e6df;
  --line: #dedfd4;
  --forest: #526b59;
  --forest-2: #435b4a;
  --forest-light: #435b4a;
  --olive: #526b59;
  --green: #526b59;
  --green-soft: #435b4a;
  --terracotta: #526b59;
  --terracotta-dark: #435b4a;
  --gold: #805a4e;
  --gold-2: #f3e6df;
  --shadow: 0 12px 36px rgba(66, 75, 57, .07);
  --shadow-soft: 0 5px 20px rgba(66, 75, 57, .04);
  --focus: #526b59;
}

body { color: var(--ink); background: var(--paper); }
::selection { color: var(--ink); background: #e2e9dc; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input, select, textarea { accent-color: var(--forest); }
:is(input, select, textarea):focus-visible,
:is(.login-card, .admin-dialog, .wizard, .dialog-card, .workflow-dialog) :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(82, 107, 89, .1);
}
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.eyebrow, .eyebrow.dark { color: var(--gold); font-weight: 650; letter-spacing: .13em; }
.button, .primary-action, .secondary-action, .login-button, .login-secondary { font-weight: 650; }
.button { line-height: 1.3; }
.button-primary, .site-header .button-primary, .button-dark, .visit-section .button-dark {
  color: var(--white); border-color: var(--forest); background: var(--forest); box-shadow: none;
}
.button-primary:hover, .site-header .button-primary:hover, .button-dark:hover, .visit-section .button-dark:hover {
  color: var(--white); border-color: var(--forest-2); background: var(--forest-2); box-shadow: var(--shadow-soft);
}
.button-light, .button-ghost, .button-outline-light {
  color: var(--forest-2); border-color: #b5c0af; background: rgba(255, 253, 249, .92); box-shadow: none;
}
:is(.button-light, .button-ghost, .button-outline-light):hover { background: var(--sage); border-color: var(--forest); }
.text-link { font-weight: 650; border-bottom-color: #b4bda9; }

/* Public navigation and the compact home widgets. */
.site-header, .works-header, .catalog-header, .legal-header, .admin-header, .crm-header {
  color: var(--ink); background: rgba(255, 253, 249, .97); border-bottom: 1px solid var(--line); box-shadow: none;
}
.desktop-nav a, .mobile-nav a { color: var(--ink); font-weight: 600; }
.desktop-nav a:hover, .mobile-nav a:hover, .works-header .desktop-nav a[aria-current="page"] { color: var(--gold); }
.city-button { color: var(--forest-2); background: var(--sage); border-color: var(--line); box-shadow: none; font-weight: 600; }
.menu-button, .mobile-nav { border-color: var(--line); }
.menu-button span:not(.sr-only) { background: var(--forest); }
.homepage-widgets { background: #f0f2e9; border-top-color: var(--line); }
.info-widget { color: var(--ink); }
.info-widget:hover { background: #e5ebdf; }
.info-widget small, .widget-date { color: var(--muted); }
.widget-icon { color: var(--forest); background: var(--surface); border-color: var(--line); }

/* Keep the photograph clear; readable text has its own light surface. */
.hero { color:var(--ink); background:var(--surface); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; min-height:620px; }
.hero-image { position:relative; inset:auto; grid-column:2; grid-row:1; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; object-position:64% center; filter:none; }
.hero-overlay { display:none; }
.hero-content { grid-column:1; grid-row:1; align-self:center; width:auto; margin:0; padding:clamp(32px,4vw,72px); }
.hero h1 { max-width: 720px; font-size: clamp(40px, 4.1vw, 68px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.hero h1 em { color: var(--forest); }
.hero-lead { max-width: 600px; color: #4f5d50; line-height: 1.65; }
.hero-proof { background: var(--surface); }
.section h2 { color: var(--ink); font-weight: 400; line-height: 1.14; }
.section h3 { font-weight: 500; }
.service-card, .service-card.featured { background: var(--surface); box-shadow: var(--shadow-soft); }
.service-card.featured { background: #f0f3eb; }
.service-card:hover { transform: translateY(-2px); border-color: #b5c0af; box-shadow: var(--shadow); }
.card-index { color: var(--forest); background: var(--sage); border-color: var(--line); font-weight: 500; }
.process-section { color: var(--ink); background: #eaf0e5; }
.process-section h2, .timeline h3 { color: var(--ink); }
.process-section .section-heading p, .timeline p { color: var(--muted); }
.timeline li > span { color: var(--forest); background: var(--surface); border-color: #b5c0af; font-weight: 500; }
.timeline li:not(:last-child)::after { background: #bdc8b7; }
.trust-list article { background: var(--paper); box-shadow: none; }
.trust-list article > span { background: var(--sage); border-color: var(--line); }
.partners-card { color: var(--ink); background: var(--blush); border-color: #e6d8cf; box-shadow: none; }
.partners-card h2 { color: var(--ink); }
.partners-card p:not(.eyebrow) { color: #645f57; }
.estimate-section { background: #f5efe7; }
.wizard-progress button.active span { color: var(--forest-2); background: var(--sage); }
.wizard label, .dialog-card label, .wizard legend { font-weight: 600; }
.visit-section { color: var(--ink); background: #eaf0e5; }
.visit-row h2 { color: var(--ink); }
.visit-section .eyebrow { color: var(--gold); }
.site-footer { color: var(--ink); background: #f4eee6; border-color: var(--line); box-shadow: none; }
.footer-grid h2 { color: var(--gold); font-weight: 650; }
.footer-grid a, .footer-grid span, .footer-brand p, .footer-bottom { color: #626c60; }
.footer-bottom { border-color: var(--line); }
.footer-brand img { filter: none; }
.home-works-section { background: var(--paper); }
.home-work-card { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-soft); }
.home-work-copy span { color: var(--gold); font-weight: 650; }
.home-work-copy h3 { color: var(--ink); line-height: 1.2; }
.home-work-copy a { color: var(--forest); font-weight: 650; }
.home-work-media, .home-work-placeholder { color: var(--muted); background: var(--sage); }

/* Catalogue, fabric variants and portfolio use the same quiet gallery surfaces. */
.catalog-hero::before { background: radial-gradient(circle at 35% 30%, #eee0d8, #d8dfcf); opacity: .6; }
.catalog-hero::after { border-color: rgba(82, 107, 89, .12); background: rgba(255, 253, 249, .35); }
.catalog-hero h1, .supplier-intro h1 { color: var(--ink); font-weight: 400; line-height: 1.1; }
.catalog-consultation { color: var(--ink); background: var(--sage); }
.catalog-consultation p, .catalog-consultation .eyebrow { color: var(--muted); }
.catalog-consultation h2 { color: var(--ink); }
.product-card, .product-detail, .catalog-request-section { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-soft); }
.request-item { border-color: var(--line); }
.request-item button { color: var(--gold); background: var(--blush); }
.detail-gallery, .work-gallery { background: #f2f2e9; }
.gallery-stage, .work-viewer-stage, .work-zoom-media { background: #e9ecdf; }
.works-page { color: var(--ink); background: var(--paper); }
.works-hero { color: var(--ink); background: linear-gradient(115deg, #f3e6df, #f6f3ea 55%, #e8eee4); }
.works-hero h1 { font-size: clamp(44px, 6.2vw, 80px); line-height: 1.08; }
.works-hero p:not(.eyebrow) { color: #5a675a; font-size: clamp(17px, 1.5vw, 21px); }
.work-card, .works-viewer { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-soft); }
.work-viewer-copy h3 { color: var(--ink); }
.works-filters button { font-weight: 600; }
.works-filters button.active, .works-filters button[aria-pressed="true"] { color: var(--forest-2); border-color: #a6b59d; background: var(--sage); }
.work-placeholder { color: var(--muted); background: var(--sage); }
.work-card-media, .work-detail-media { background: var(--sage); }
.work-category, .work-category-label { color: var(--gold); }
.supplier-form { background: var(--surface); box-shadow: var(--shadow); }
.supplier-form label { font-weight: 600; }

/* Entry, registration, password recovery, and the policy page. */
.login-story {
  color: var(--ink);
  background: linear-gradient(145deg, rgba(243, 230, 223, .97), rgba(232, 238, 228, .94)), url("assets/makosha-hero.webp") center/cover;
}
.login-story::after { border-color: rgba(82, 107, 89, .13); box-shadow: 0 0 0 90px rgba(255, 253, 249, .12), 0 0 0 180px rgba(255, 253, 249, .08); }
.login-brand { background: var(--surface); }
.login-story h1 { font-size: clamp(38px, 4vw, 64px); line-height: 1.12; font-weight: 400; }
.login-story p, .login-story ul { color: #52604f; }
.login-story li::before { color: var(--forest); }
.login-panel { background: var(--paper); }
.login-card { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); }
.login-card h2 { color: var(--ink); font-weight: 400; line-height: 1.15; }
.login-card label { font-weight: 600; }
.login-password-toggle { color: var(--forest-2); background: var(--sage); font-weight: 600; }
.login-password-toggle:hover { border-color: var(--forest); background: #dce6d7; }
.auth-tabs { background: var(--sage); }
.auth-tabs button { font-weight: 600; }
.auth-tabs button.active, .auth-tabs button[aria-selected="true"] { color: var(--forest-2); background: var(--surface); box-shadow: var(--shadow-soft); }
.demo-note { background: #f0f3eb; }
.legal-page { background: var(--paper); }
.legal-content { line-height: 1.75; }

/* The CRM and supplier workspaces share the public palette without losing status colours. */
.sidebar, .admin-sidebar { color: var(--ink); background: #e8eee3; border-right: 1px solid #d7dfd0; }
.sidebar-close { color: var(--ink); background: var(--surface); }
.context-card { background: var(--surface); border-color: var(--line); }
.context-card small, .sidebar-footer a, .sidebar-footer span, .sidebar-label, .sidebar-note span { color: #5d6959; }
.context-dot { background: var(--forest); box-shadow: 0 0 0 4px var(--sage); }
.sidebar-nav a, .sidebar-nav button, .admin-sidebar nav button { color: #475840; font-weight: 550; }
.sidebar-nav a::before, .sidebar-nav button::before { color: var(--forest); }
.sidebar-nav a:hover, .sidebar-nav a.active, .sidebar-nav button:hover, .sidebar-nav button.active,
.admin-sidebar nav button:hover, .admin-sidebar nav button.active { color: #354c39; background: var(--surface); }
.sidebar-nav button.locked, .sidebar-nav button.locked:hover { color: #687560; background: transparent; }
.sidebar-nav button.locked::before { color: #687560; }
.sidebar-footer { border-color: #ced8c7; }
.sidebar-note { background: var(--surface); }
.sidebar-note a { color: var(--forest); }
.admin-sidebar nav span { background: #d7e2d0; }
.global-search { background: var(--paper); }
.panel, .metric-card { background: var(--surface); box-shadow: var(--shadow-soft); }
.page-heading h1 { color: var(--ink); font-weight: 400; line-height: 1.15; }
.portfolio-admin-media { background: var(--sage); }
.admin-content .primary-action { background: var(--forest); }

/* Compact utility pages do not load the public component stylesheet. */
body:is([data-page="pricing"], [data-page="catalog-media"]) > header {
  color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--line);
}
body:is([data-page="pricing"], [data-page="catalog-media"]) > header a { color: var(--forest-2); }
body:is([data-page="pricing"], [data-page="catalog-media"]) h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.2; }
body[data-page="pricing"] section, body[data-page="catalog-media"] .panel { border-color: var(--line); background: var(--surface); border-radius: 20px; }
body[data-page="pricing"] button, body[data-page="catalog-media"] .primary { color: var(--white); background: var(--forest); border-color: var(--forest); }
body[data-page="pricing"] th, body[data-page="catalog-media"] .drop { background: var(--sage); }
body[data-page="catalog-media"] .drop { border-color: #a9b69e; }
body[data-page="catalog-media"] .upload-bar { background: #e8eee4; border-color: var(--line); box-shadow: var(--shadow); }
body[data-page="catalog-media"] :is(button, .button):not(.primary) { color: var(--forest-2); background: var(--surface); border-color: #b5c0af; }

dialog { color: var(--ink); background: var(--surface); }
dialog::backdrop, .city-dialog::backdrop, .work-zoom::backdrop, .admin-dialog::backdrop { background: rgba(45, 57, 43, .48); backdrop-filter: blur(4px); }

@media (max-width: 680px) {
  .hero { grid-template-columns:1fr; min-height:0; }
  .hero-image { grid-column:1; grid-row:1; height:clamp(230px,60vw,420px); object-position:center; }
  .hero-content { grid-column:1; grid-row:2; }
  .hero h1 { font-size: clamp(38px, 10vw, 56px); line-height: 1.1; }
  .hero-content { padding:32px 24px 36px; }
  .section h2 { font-size: clamp(34px, 9vw, 48px); }
  .login-story h1 { font-size: clamp(34px, 8vw, 48px); }
  .works-hero h1 { font-size: clamp(40px, 10vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Space for navigation and form controls on compact screens. */
.header-row { width: min(1320px, calc(100% - 48px)); }
.desktop-nav { gap: 20px; }
.desktop-nav a { white-space: nowrap; }
.work-zoom { color: var(--ink); background: var(--paper); }
.admin-sidebar { min-width: 0; }
body[data-page="pricing"] :is(label, form, .grid, .settings) { min-width: 0; }
body[data-page="pricing"] .grid, body[data-page="pricing"] .settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  body[data-page="index"] :is(.desktop-nav, .desktop-only) { display: none; }
  .menu-button { display: block; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 980px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 750px) {
  body[data-page="pricing"] .grid, body[data-page="pricing"] .settings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .header-row { width: calc(100% - 28px); gap: 10px; }
  .header-actions { min-width: 0; gap: 8px; }
  .city-button { min-width: 0; flex: 1 1 auto; }
  .menu-button { flex: 0 0 44px; }
  .crm-header { gap: 10px; }
  .crm-header-actions, .profile-button { min-width: 0; }
  .profile-copy { max-width: min(150px, calc(100vw - 194px)); }
  .profile-button .avatar, .notification-center, .sidebar-open { flex-shrink: 0; }
}