/**
 * 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);
}
/* Nov 3 2026 P1: only the email night block is a FULL pair. places and causes light up here only under <html data-night="on"> (no page sets it);
   their own bridges pin color-scheme:light. A site gets its night back by passing every surface, then two blind seats.
   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"][data-night="on"], html[data-estate="causes"][data-night="on"] {
    --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"][data-night="on"], html[data-estate="causes"][data-night="on"] {
    --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: causes ── */
/* 4e. UmmahCauses: light page unchanged. Night styles for the redesign pages (they carry no theme toggle, so night follows the system setting); mint is the accent. */
/* Nov 3 2026 P1: the night block below is OFF for this site: the redesign pages (home) have a night pair, but charities, charity, how-it-works and donate keep
   hard-coded light surfaces (white cards, a cream band) under cream text (1.09:1). It applies only under <html data-night="on">, which no page sets. */
html[data-estate="causes"] { color-scheme: light; }
/* Wave B theme.js sets data-umg-theme="void" under an OS dark setting and the app CSS answers color-scheme:dark for the whole root, but the content of the light-only pages
   (donate, cause pages: body bg-gray-50) stays light. Unset inherited text then resolved to white on light (1.05:1): give that content explicit dark ink. */
html[data-estate="causes"][data-umg-theme="void"] body.bg-gray-50 main { color: #111827; }
@media (prefers-color-scheme: dark) {
  html[data-estate="causes"][data-night="on"] :is(a.ucr-donate, .ucr-page a.ucr-btn-lg:not(.ucr-btn-2nd), .ucr-page a.ucr-btn-md:not(.ucr-btn-2nd), .ucr-btn-lg:not(.ucr-btn-2nd), .ucr-btn-md:not(.ucr-btn-2nd), .ucr-card-btn, .ucr-feature-tx .ucr-btn, .ucr-amt-b[aria-pressed="true"]) { background: var(--er-accent); color: var(--er-on-accent) !important; border-color: var(--er-accent); box-shadow: none; }
  html[data-estate="causes"][data-night="on"] :is(a.ucr-donate:hover, .ucr-page a.ucr-btn-lg:hover, .ucr-page a.ucr-btn-md:hover, .ucr-page button.ucr-btn-md:hover, .ucr-card:hover .ucr-card-btn) { background: var(--er-accent-hover) !important; color: var(--er-on-accent) !important; }
  html[data-estate="causes"][data-night="on"] .ucr-amt-b { color: var(--er-accent); border-color: color-mix(in srgb, var(--er-accent) 40%, transparent); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-nav a:hover, .ucr-nav a.is-active, .ucr-login:hover) { color: var(--er-accent); }
  html[data-estate="causes"][data-night="on"] { color-scheme: dark; }
  html[data-estate="causes"][data-night="on"] :is(.ucr-body, .ucr-page) { background: var(--er-night); color: var(--er-night-text); }
  html[data-estate="causes"][data-night="on"] .ucr-header { background: rgba(11,21,16,.9); border-bottom-color: rgba(248,245,236,.12); }
  html[data-estate="causes"][data-night="on"] .ucr-mobile { background: var(--er-night); border-top-color: rgba(248,245,236,.12); }
  html[data-estate="causes"][data-night="on"] .ucr-mobile a { color: var(--er-night-text); border-bottom-color: rgba(248,245,236,.1); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-nav a, .ucr-login, .ucr-burger) { color: #D5DED7; }
  html[data-estate="causes"][data-night="on"] .ucr-logo span:first-child { color: #34D399; }
  html[data-estate="causes"][data-night="on"] .ucr-logo span:last-child { color: #F2B84B; }
  html[data-estate="causes"][data-night="on"] :is(.ucr-h1, .ucr-h2, .ucr-feature-h, .ucr-sun-h, .ucr-quote, .ucr-heart-clip span, .ucr-fact-n, .ucr-amt, .ucr-raised, .ucr-trust b, .ucr-hero-note strong) { color: #34D399; }
  html[data-estate="causes"][data-night="on"] :is(.ucr-h1 em, .ucr-sun-h em, .ucr-trust b.gold, .ucr-feature-k, .ucr-amt.first, .ucr-reach h3, .ucr-ref) { color: #F2B84B; }
  html[data-estate="causes"][data-night="on"] :is(.ucr-lead, .ucr-trust, .ucr-hero-note, .ucr-sec-lead, .ucr-feature-p, .ucr-band p.big, .ucr-fact-d, .ucr-sun-p, .ucr-amt-line, .ucr-picker-s, .ucr-lead strong, .ucr-strong) { color: var(--er-night-soft); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-card-n, .ucr-amt small, .ucr-raised small, .ucr-sun-note, .ucr-legal p) { color: #9AA89F; }
  html[data-estate="causes"][data-night="on"] :is(.ucr-picker-t, .ucr-fact-t, .ucr-reach-name, .ucr-card-t, .ucr-page a.ucr-card, .ucr-page a.ucr-feature, .ucr-page a.ucr-reach-item) { color: var(--er-night-text); }
  html[data-estate="causes"][data-night="on"] .ucr-hero, html[data-estate="causes"][data-night="on"] .ucr-bhero { background: linear-gradient(160deg, #123222 0%, #0B1510 100%); }
  html[data-estate="causes"][data-night="on"] .ucr-hero-bg img { opacity: .22; }
  html[data-estate="causes"][data-night="on"] .ucr-hero-veil { background: radial-gradient(ellipse 50% 55% at 50% 45%, rgba(11,21,16,.55) 0%, rgba(11,21,16,.25) 60%, rgba(11,21,16,0) 100%); }
  html[data-estate="causes"][data-night="on"] .ucr-hero-fade { background: linear-gradient(to bottom, rgba(11,21,16,0), var(--er-night)); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-feature, .ucr-reach, .ucr-close-panel) { background: var(--er-t-mint); }
  html[data-estate="causes"][data-night="on"] .ucr-feature-ph { background: #14221A; }
  html[data-estate="causes"][data-night="on"] :is(.ucr-sun) { background: var(--er-t-sand); }
  html[data-estate="causes"][data-night="on"] .ucr-sun-glow, html[data-estate="causes"][data-night="on"] .ucr-close-glow { opacity: .25; }
  html[data-estate="causes"][data-night="on"] .ucr-band { background: linear-gradient(180deg, var(--er-night) 0%, var(--er-t-rose) 22%, var(--er-t-rose) 78%, var(--er-night) 100%); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-card, .ucr-fact, .ucr-reach-item, .ucr-narr-in, .ucr-filter) { background: var(--er-night-raised); border-color: rgba(248,245,236,.10); color: var(--er-night-text); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-heart-clip, .ucr-logos span) { background: var(--er-night-raised); }
  html[data-estate="causes"][data-night="on"] .ucr-picker { background: var(--er-t-sand); }
  html[data-estate="causes"][data-night="on"] :is(.ucr-search input, .ucr-filter select, .ucr-zakat) { background: var(--er-night); border-color: rgba(248,245,236,.18); color: var(--er-night-text); }
  html[data-estate="causes"][data-night="on"] .ucr-amt-b { background: var(--er-night-raised); }
  html[data-estate="causes"][data-night="on"] .ucr-page a.ucr-btn-2nd { background: rgba(255,255,255,.06); }
  html[data-estate="causes"][data-night="on"] .ucr-legal { border-top-color: rgba(248,245,236,.12); }
  html[data-estate="causes"][data-night="on"] .ucr-page :is(strong, b) { color: var(--er-night-text); }
  html[data-estate="causes"][data-night="on"] .ucr-trust-close, html[data-estate="causes"][data-night="on"] .ucr-trust span { color: var(--er-night-soft); }
  html[data-estate="causes"][data-night="on"] .ucr-trust-close strong { color: #34D399; }
  html[data-estate="causes"][data-night="on"] .ucr-trust b { color: #34D399; }
  html[data-estate="causes"][data-night="on"] #uc-ummah-one-banner { color: var(--er-night-soft) !important; }
  html[data-estate="causes"][data-night="on"] #uc-ummah-one-banner :is(strong, a) { color: #34D399 !important; }
  html[data-estate="causes"][data-night="on"] .ucr-page a.ucr-btn-2nd { color: var(--er-accent); border-color: color-mix(in srgb, var(--er-accent) 45%, transparent); }
}