/* css/wc-surfaces.css: the surface system for every signed-in page (admin, cleaner app, customer
   and host portals). Owner, 26 Sep 2026: "the words just lay flat on the background... it should
   pop out or call out". Rule of the house: text never sits on the page ground; it sits on a
   surface with a clear edge.

   THE SYSTEM (tokens below are the only place these values live)
     ground ........ --wcs-ground        warm linen page ground, a step darker than a card
     raised ........ --wcs-raised        cards, panels, mastheads: white, hairline edge, soft shadow
     inset ......... --wcs-inset         a quiet well inside a raised surface (notes, toolbars, empty states)
     hairline ...... --wcs-line          the edge of a raised surface; --wcs-line-soft between rows
     control edge .. --wcs-line-strong   the edge of a secondary button or chip, so it reads as a control
     shadow ........ --wcs-shadow        rest; --wcs-shadow-hover on hover; --wcs-shadow-lifted for callouts
     radius ........ --wcs-radius (16) for surfaces, --wcs-radius-sm (10) for controls and wells
     eyebrow ....... .wcs-eyebrow        small caps label above a heading, sage deep on white (6.9:1)
   Contrast (computed, WCAG 2.1 relative luminance): ink on raised 12.14:1, on ground 10.52:1;
   ink-2 on raised 9.16:1; muted on raised 6.24:1, on inset 5.78:1, on ground 5.40:1, on sage
   wash 5.45:1; sage-deep on raised 7.79:1, on sage wash 6.81:1; white on sage-deep 7.79:1;
   gold-ink on gold wash 7.05:1. Raised against ground 1.155:1 is carried by the hairline and the
   shadow, never by fill alone.

   How it loads: app/asset-tools.php wc_explain_tags() links this sheet, then wc-surfaces-<portal>.css,
   then wc-explain.css, on every signed-in page, versioned by file time (no page edits needed).
   The older token file css/surface-polish.css reaches admin pages only through an unversioned
   @import in admin/css/base.css that nginx caches for a year, which is why the surface tokens
   live here. Portal sheets apply these tokens to each portal's existing classes; layouts are
   untouched, only surfaces change. */

:root {
  --wcs-ground: #F3EEE6;
  --wcs-raised: #FFFFFF;
  --wcs-inset: #F9F6F0;
  --wcs-line: #E3D9CB;
  --wcs-line-soft: #EFE9DF;
  --wcs-line-strong: #928672; /* was #CDBFA9 (1.8:1); control edges need 3:1 (26 Sep 2026) */
  --wcs-ink: #2F3830;
  --wcs-ink-2: #4F4739;
  --wcs-muted: #6A5F50;
  --wcs-sage: #5E7259;
  --wcs-sage-deep: #46573F;
  --wcs-sage-wash: #EDF1E8;
  --wcs-sage-line: #C9D3C1;
  --wcs-gold: #C9A227;
  --wcs-gold-wash: #FBF4E1;
  --wcs-gold-ink: #6B4E00;
  --wcs-row-hover: #FBF8F3;
  --wcs-shadow: 0 1px 2px rgba(61, 55, 47, .06), 0 10px 24px -16px rgba(61, 55, 47, .30);
  --wcs-shadow-hover: 0 2px 4px rgba(61, 55, 47, .07), 0 18px 36px -18px rgba(61, 55, 47, .38);
  --wcs-shadow-lifted: 0 2px 6px rgba(61, 55, 47, .07), 0 26px 50px -24px rgba(47, 56, 48, .45);
  --wcs-focus: 0 0 0 3px rgba(94, 114, 89, .38);
  --wcs-radius: 16px;
  --wcs-radius-sm: 10px;
  --wcs-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --wcs-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wcs-ease: cubic-bezier(.2, .75, .3, 1);
}

/* ---- primitives any page can use by class ------------------------------------------ */
.wcs-card { background: var(--wcs-raised); border: 1px solid var(--wcs-line); border-radius: var(--wcs-radius); box-shadow: var(--wcs-shadow); }
.wcs-well { background: var(--wcs-inset); border: 1px solid var(--wcs-line-soft); border-radius: var(--wcs-radius-sm); }
.wcs-eyebrow { margin: 0 0 6px; font: 700 11px/1.2 var(--wcs-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wcs-sage-deep); }
.wcs-btn2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--wcs-line-strong); border-radius: var(--wcs-radius-sm); background: var(--wcs-raised);
  color: var(--wcs-ink); font: 600 13.5px/1 var(--wcs-sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 1px rgba(61, 55, 47, .05); transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wcs-btn2:hover { border-color: var(--wcs-sage); background: var(--wcs-sage-wash); }
.wcs-btn2:focus-visible { outline: 3px solid var(--wcs-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wcs-card, .wcs-btn2 { transition: none; }
}