/**
 * 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: army ── */
/* 4g. UmmahArmy: motion only. Its own theme toggle and its colours are unchanged; the crimson and band changes are held (see held/). */