/* ============================================================================
   demo-tokens-fwre.css — the FW Real Estate skin for the portable demo-frame.
   FLAT design (no gradients) on a green palette with coral as the tertiary accent:

     emerald  #15805A  (dark green)   -> --demo-accent    (brand primary)
     mint     #34D399  (light green)  -> --demo-accent-hover / light accents
     coral    #E8736A                 -> --demo-accent-2  (tertiary: price/CTA)
     white    #F4F5F3                 -> neutrals
     slate    #5A6B6A                 -> muted ink

   This is the ONLY file that carries product colour. Tuned for WCAG-AA on each
   surface. The brand reads dark-green on light surfaces and a brightened emerald
   on the dark chrome (so it clears AA on near-black). The design is FLAT:
   --demo-gradient resolves to a SOLID accent fill (no linear-gradient), and the
   hero/skeleton gradients elsewhere were flattened to solid surfaces.

   Layer order:  fw-uikit (foundation) -> THIS (tokens) -> demo-frame (chrome).
   To re-skin for another product: copy this file, resample its icon, done.
   ============================================================================ */

:root {
  /* — brand accents (flat) — */
  --demo-accent:        #19A06E;   /* emerald, brightened for dark — ~6.0:1 on --demo-bg */
  --demo-accent-hover:  #34D399;   /* mint (light green) */
  --demo-accent-2:      #E8736A;   /* coral — tertiary (price / CTA) */
  --demo-info:          #2FB98C;   /* green info, brightened */
  --demo-warm:          #F0A05A;   /* warm amber */
  --demo-cta:           #FFBF00;   /* stand CTA amber — matches the official design's Download button */
  --demo-on-cta:        #323232;   /* dark ink on the amber CTA (same as the Download button) */
  --demo-on-accent:     #052016;   /* dark ink on the bright emerald accent (8.7:1) */
  --demo-gradient:      var(--demo-accent);   /* FLAT — no linear-gradient (design is flat) */
  --demo-hero-glow:     rgba(52, 211, 153, 0.14);  /* mint wash — now only feeds --demo-ring (focus) */

  /* — dark surfaces (default) — faint green-slate cast echoes the brand — */
  --demo-bg:            #0F1613;
  --demo-surface:       #18211D;   /* sidebar, cards */
  --demo-surface-2:     #212C27;   /* hover / raised */
  --demo-topbar:        #131C18;

  /* — ink — */
  --demo-ink:           #f1f5f3;   /* 16:1 */
  --demo-ink-muted:     #9fb0a9;   /* 7.0:1 */

  /* — hairlines / overlays (no brand colour -> kept as neutral alphas) — */
  --demo-border:        rgba(255, 255, 255, 0.09);
  --demo-border-strong: rgba(255, 255, 255, 0.16);
  --demo-hover:         rgba(255, 255, 255, 0.06);
  --demo-rail-icon:     rgba(255, 255, 255, 0.55);

  /* — geometry (shared with the frame; here so a skin can override) — */
  --demo-topbar-h:            58px;
  --demo-radius-lg:           18px;  /* hero / large panels */
  --demo-radius:              13px;  /* cards, stage */
  --demo-radius-sm:           9px;   /* buttons, badges, inputs */

  /* — elevation (neutral black alphas -> modern depth; no product colour) — */
  --demo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.16);
  --demo-shadow:    0 6px 22px rgba(0, 0, 0, 0.30);
  --demo-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.46);
  --demo-ring:      0 0 0 3px var(--demo-hero-glow);   /* focus / active glow */

  /* — motion — */
  --demo-ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --demo-fast:  120ms;
  --demo-mid:   220ms;

  /* — spacing rhythm (8pt-based) — */
  --demo-space-1: 0.375rem;
  --demo-space-2: 0.625rem;
  --demo-space-3: 1rem;
  --demo-space-4: 1.5rem;
  --demo-space-5: 2.25rem;
  --demo-space-6: 3.5rem;
}

/* — light theme: the exact dark-green brand, contrast-tuned for white surfaces — */
:root[data-theme="light"] {
  --demo-accent:        #15805A;   /* emerald (dark green) — 4.6:1 on white */
  --demo-accent-hover:  #0E6B49;   /* deeper emerald on hover */
  --demo-accent-2:      #D2564C;   /* darkened coral for white */
  --demo-info:          #0F7E5C;
  --demo-on-accent:     #ffffff;
  --demo-hero-glow:     rgba(21, 128, 90, 0.10);

  --demo-bg:            #f2f6f4;
  --demo-surface:       #ffffff;
  --demo-surface-2:     #e9f1ed;
  --demo-topbar:        #ffffff;

  --demo-ink:           #13201b;
  --demo-ink-muted:     #5b6a64;   /* 5.7:1 on white */

  --demo-border:        rgba(0, 0, 0, 0.10);
  --demo-border-strong: rgba(0, 0, 0, 0.16);
  --demo-hover:         rgba(0, 0, 0, 0.05);
  --demo-rail-icon:     rgba(0, 0, 0, 0.45);

  /* softer elevation on light surfaces */
  --demo-shadow-sm: 0 1px 2px rgba(18, 28, 24, 0.08), 0 1px 1px rgba(18, 28, 24, 0.05);
  --demo-shadow:    0 6px 22px rgba(18, 28, 24, 0.10);
  --demo-shadow-lg: 0 18px 50px rgba(18, 28, 24, 0.16);
}