/**
 * Estate colour and motion layer, Nov 3 2026. One shared file; each site loads the copy built for it
 * (core plus that site's property bridge, see build.py), AFTER its own CSS, and sets <html data-estate="...">.
 * Tokens: brand-system/tokens.css. Contrast: estate-refresh/contrast.py.
 *  1. Action green is #0A7B3D (white text 5.37:1). #166534 is the pressed state.
 *  2. One tint per section (mint, sky, sand, rose). Ink on a tint is 14:1 or better.
 *  3. Focus rings and links wear the accent. The seal never changes colour.
 *  4. Night: mint #34D399 marks live and success; the property colours have night values.
 *  5. Motion: transform and opacity, 90 to 140 ms press, 2 px lift on hover, only when the visitor has not asked
 *     for reduced motion. Nothing starts hidden, so no content needs JS.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
html[data-estate] {
  --er-green: #0A7B3D;
  --er-green-pressed: #166534;
  --er-tint-mint: #EAF7EE;
  --er-tint-sky: #EAF2FE;
  --er-tint-sand: #FFF4DD;
  --er-tint-rose: #FDE8F1;
  --er-night: #0B1510;
  --er-night-raised: #14221A;
  --er-night-text: #F8F5EC;
  --er-night-soft: #B9C6BD;
  --er-mint: #34D399;
  --er-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* The accent: the estate green by day, mint by night. */
  --er-accent: #0A7B3D;
  --er-accent-hover: #166534;
  --er-on-accent: #FFFFFF;
  --er-accent-tint: #EAF7EE;
  --er-ok: #0A7B3D;
  --er-ok-tint: #EAF7EE;
  --er-shadow-lift: 0 10px 24px rgba(15, 31, 23, 0.12), 0 2px 6px rgba(15, 31, 23, 0.07);
}
/* Night: mint is the accent and the live/success colour on the night surface (9.68:1). Buttons take dark ink on the mint fill.
   Day: every site keeps the estate green. Per-property accent colours are a proposal, see held/. */
@media (prefers-color-scheme: dark) {
  html[data-estate="email"], html[data-estate="places"], html[data-estate="causes"] {
    --er-accent: #34D399; --er-accent-hover: #6EE7B7; --er-accent-tint: rgba(52, 211, 153, 0.10);
    --er-ok: #34D399; --er-ok-tint: rgba(52, 211, 153, 0.10);
    --er-on-accent: #0B1510;
    --er-shadow-lift: 0 10px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  }
}

/* ── 2. Tint scale: one tint per section, ink on top ──────────────────────── */
/* --er-t-* is the tint a surface should use now: the day tint, or the same hue at 8% over the night surface. */
html[data-estate] { --er-t-mint: #EAF7EE; --er-t-sky: #EAF2FE; --er-t-sand: #FFF4DD; --er-t-rose: #FDE8F1; }
@media (prefers-color-scheme: dark) {
  html[data-estate="email"], html[data-estate="places"], html[data-estate="causes"] {
    --er-t-mint: color-mix(in srgb, #34D399 8%, #0B1510);
    --er-t-sky:  color-mix(in srgb, #5AA2FF 8%, #0B1510);
    --er-t-sand: color-mix(in srgb, #F2B84B 8%, #0B1510);
    --er-t-rose: color-mix(in srgb, #FF6FA8 8%, #0B1510);
  }
}
.er-tint-mint, [data-tint="mint"] { background-color: var(--er-t-mint, #EAF7EE); }
.er-tint-sky,  [data-tint="sky"]  { background-color: var(--er-t-sky, #EAF2FE); }
.er-tint-sand, [data-tint="sand"] { background-color: var(--er-t-sand, #FFF4DD); }
.er-tint-rose, [data-tint="rose"] { background-color: var(--er-t-rose, #FDE8F1); }

/* ── 3. Motion: every button and card ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html[data-estate] :is(
      .btn, .btn-primary, .btn-secondary, .btn-gold, .btn-glass, .btn-primary-on-tint, .nav-cta,
      .umg-btn, .ucr-btn, .ucr-card-btn, .ucr-promo-btn, .cube-btn, .handle-main-btn, .handle-btn,
      .handle-success-cta, .ladder-cta, .domain-cta, .contact-cta-btn, .umg-pass-btn, .uc-sec-cta,
      .uc-who-cta, .uc-orgstrip-cta, .er-btn, button[type="submit"]:not([class*="toggle"])):not(.sticky-cta),
  html[data-estate] :is(
      .feature-card, .domain-card, .listing-card, .ucr-card, .ucr-tile, .uc-sec, .uc-who-card,
      .skill-tile-1, .skill-tile-2, .skill-tile-3, .oh-tile, .er-card) {
    transition-property: transform, opacity, box-shadow, background-color, border-color, color;
    transition-duration: 140ms, 140ms, 200ms, 160ms, 160ms, 160ms;
    transition-timing-function: var(--er-ease);
  }
  html[data-estate] :is(
      .feature-card, .domain-card, .listing-card, .ucr-card, .ucr-tile, .uc-sec, .uc-who-card,
      .skill-tile-1, .skill-tile-2, .skill-tile-3, .oh-tile, .er-card) { transition-duration: 200ms, 200ms, 240ms, 160ms, 160ms, 160ms; }
  @media (hover: hover) {
    html[data-estate] :is(
        .btn, .btn-primary, .btn-secondary, .btn-gold, .btn-glass, .btn-primary-on-tint, .nav-cta,
        .umg-btn, .ucr-btn, .ucr-card-btn, .ucr-promo-btn, .cube-btn, .handle-main-btn, .handle-btn,
        .handle-success-cta, .ladder-cta, .domain-cta, .contact-cta-btn, .umg-pass-btn, .uc-sec-cta,
        .uc-who-cta, .uc-orgstrip-cta, .er-btn):not(.sticky-cta):not(:disabled):hover,
    html[data-estate] :is(
        .feature-card, .domain-card, .listing-card, .ucr-card, .ucr-tile, .uc-sec, .uc-who-card,
        .skill-tile-1, .skill-tile-2, .skill-tile-3, .oh-tile, .er-card):hover {
      transform: translateY(-2px);
      box-shadow: var(--er-shadow-lift);
    }
  }
  html[data-estate] :is(
      .btn, .btn-primary, .btn-secondary, .btn-gold, .btn-glass, .btn-primary-on-tint, .nav-cta,
      .umg-btn, .ucr-btn, .ucr-card-btn, .ucr-promo-btn, .cube-btn, .handle-main-btn, .handle-btn,
      .handle-success-cta, .ladder-cta, .domain-cta, .contact-cta-btn, .umg-pass-btn, .uc-sec-cta,
      .uc-who-cta, .uc-orgstrip-cta, .er-btn, button[type="submit"]):not(.sticky-cta):not(:disabled):active,
  html[data-estate] :is(
      .feature-card, .domain-card, .listing-card, .ucr-card, .ucr-tile, .uc-sec, .uc-who-card,
      .skill-tile-1, .skill-tile-2, .skill-tile-3, .oh-tile, .er-card):active {
    transform: scale(0.97);
    transition-duration: 90ms;
    box-shadow: none;
  }
  /* The @name check field: the row turns to the green ready state in about 200 ms. */
  html[data-estate] .handle-input-row,
  html[data-estate] .handle-feedback { transition: border-color 200ms var(--er-ease), background-color 200ms var(--er-ease), box-shadow 200ms var(--er-ease), color 200ms var(--er-ease); }
}
/* Ready state (no motion needed): the row goes green when the name is free. */
html[data-estate] .handle-check:has(.handle-feedback.ok) .handle-input-row,
html[data-estate] .er-name-field[data-state="ok"] {
  border-color: var(--er-ok);
  background-color: var(--er-ok-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--er-ok) 22%, transparent);
}
html[data-estate] .handle-feedback.ok { color: var(--er-ok); }

/* Focus rings wear the property colour. */
html[data-estate] :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--er-accent); outline-offset: 3px; }

/* ── Property bridge: places ── */
/* 4f. UmmahPlaces: green action, night values through the Tailwind colour variables. */
html[data-estate="places"] { --color-brand-500: #0A7B3D; --color-brand-600: #166534; --color-brand-700: #0A7B3D; --color-brand-800: #166534; }
@media (prefers-color-scheme: dark) {
  html[data-estate="places"] {
    color-scheme: dark;
    --color-warm-50: #0B1510; --color-warm-100: #14221A; --color-warm-200: #26372C; --color-warm-300: #3A4D41;
    --color-warm-400: #9AA89F; --color-warm-500: #A9B6AD; --color-warm-600: #B9C6BD; --color-warm-700: #D5DED7; --color-warm-800: #E8EEE9; --color-warm-900: #F8F5EC;
    --color-gray-50: #101C15; --color-gray-100: #14221A; --color-gray-200: #26372C; --color-gray-500: #A9B6AD; --color-gray-600: #B9C6BD; --color-gray-700: #D5DED7; --color-gray-800: #E8EEE9; --color-gray-900: #F8F5EC;
    --color-brand-50: rgba(52,211,153,.10); --color-brand-100: rgba(52,211,153,.16);
    --color-brand-500: #34D399; --color-brand-600: #34D399; --color-brand-700: #34D399; --color-brand-800: #6EE7B7; --color-brand-900: #A7F3D0;
    --color-amber-50: rgba(242,184,75,.10); --color-amber-700: #F2B84B; --color-amber-800: #F2B84B;
  }
  html[data-estate="places"] body { background-color: #0B1510; color: #F8F5EC; }
  html[data-estate="places"] .bg-white { background-color: #14221A; }
  html[data-estate="places"] [class*="bg-white/9"], html[data-estate="places"] [class*="bg-white/8"] { background-color: rgba(20,34,26,.94); }
  html[data-estate="places"] :is([style*="#50432f" i], [style*="#2F4038" i], [style*="#4A5C52" i]) { color: #B9C6BD !important; }
  html[data-estate="places"] [style*="#8A6D2F" i] { color: #F2B84B !important; }
  html[data-estate="places"] [style*="#0c753d" i] { color: #34D399 !important; }
  html[data-estate="places"] #uc-ummah-one-banner { color: var(--er-night-soft) !important; }
  html[data-estate="places"] :is(.bg-warm-800) { background-color: #0E1A13; }
  html[data-estate="places"] :is(.bg-warm-900) { background-color: #060D09; }
  html[data-estate="places"] :is(.bg-brand-500, .bg-brand-600, .bg-brand-700, [class~="bg-brand-600/90"]) { background-color: #0A7B3D; }
  html[data-estate="places"] :is(.bg-brand-50, .bg-brand-100) { background-color: rgba(52,211,153,.12); }
  html[data-estate="places"] :is(.bg-brand-500, .bg-brand-600, .bg-brand-700) :is(span, svg) { color: #fff; }
  html[data-estate="places"] .border-gray-200, html[data-estate="places"] .border-gray-100 { border-color: #26372C; }
  html[data-estate="places"] :is(input, select, textarea) { background-color: #0B1510; color: #F8F5EC; }
        }