/* ============================================================
   Wall & Floor — Color tokens
   Sampled from the brand brochure (WallnFloor.pdf).
   Warm, architectural palette: bone paper, ink black,
   a crimson brand red, and copper/bronze metallic accents.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --wf-red:         #C4141B; /* primary brand red (brochure headline accent) */
  --wf-red-bright:  #E0231C; /* hover / active on dark */
  --wf-red-deep:    #8E0F13; /* pressed / deep */
  --wf-red-tint:    rgba(196, 20, 27, 0.12);

  --wf-copper:      #B0896A; /* metallic accent (hairlines, "Home Interior") */
  --wf-gold:        #C9A279; /* lighter gold for hairlines on dark */
  --wf-bronze:      #6E533B; /* deep bronze */

  /* ---- Warm neutrals (ink → bone) ---- */
  --wf-ink-950:     #100D0B;
  --wf-ink-900:     #14110F; /* primary dark background */
  --wf-ink-850:     #1A1613;
  --wf-ink-800:     #211B17; /* elevated surface */
  --wf-ink-750:     #29221D;
  --wf-ink-700:     #33291F;
  --wf-stone-600:   #6B605A; /* muted text on dark */
  --wf-stone-500:   #8A7F76;
  --wf-stone-400:   #B8ADA4;
  --wf-bone-300:    #D8CEC6;
  --wf-bone-200:    #EFE7DF; /* primary light text on dark */
  --wf-bone-100:    #F3EBE8; /* brand paper / cream */
  --wf-bone-050:    #FAF6F3;
  --wf-white:       #FFFFFF;

  /* ---- Feedback ---- */
  --wf-success:     #5E8C6A;
  --wf-warning:     #C9A279;
  --wf-danger:      #C4141B;

  /* ============================================================
     Semantic aliases — DARK theme is the default surface
     (the marketing site is dark, Mireya-style).
     Use .theme-light to flip a region to the cream paper theme.
     ============================================================ */
  --bg:             var(--wf-ink-900);
  --bg-deep:        var(--wf-ink-950);
  --bg-elevated:    var(--wf-ink-850);
  --surface-card:   var(--wf-ink-800);
  --surface-raised: var(--wf-ink-750);

  --text:           var(--wf-bone-200);
  --text-strong:    var(--wf-bone-050);
  --text-dim:       var(--wf-stone-400);
  --text-muted:     var(--wf-stone-500);

  --border:         rgba(239, 231, 223, 0.12);
  --border-strong:  rgba(239, 231, 223, 0.22);
  --hairline:       rgba(201, 162, 121, 0.45); /* gold hairline */

  --accent:         var(--wf-red);
  --accent-hover:   var(--wf-red-bright);
  --accent-contrast:var(--wf-bone-050);
  --accent-gold:    var(--wf-gold);

  --overlay-scrim:  rgba(16, 13, 11, 0.62); /* image darkening scrim */
}

/* ---- Light (cream paper) theme scope ---- */
.theme-light {
  --bg:             var(--wf-bone-100);
  --bg-deep:        var(--wf-bone-050);
  --bg-elevated:    var(--wf-white);
  --surface-card:   var(--wf-white);
  --surface-raised: var(--wf-bone-050);

  --text:           var(--wf-ink-900);
  --text-strong:    var(--wf-ink-950);
  --text-dim:       #5A5049;
  --text-muted:     #877D74;

  --border:         rgba(20, 17, 15, 0.12);
  --border-strong:  rgba(20, 17, 15, 0.20);
  --hairline:       rgba(176, 137, 106, 0.55);

  --accent-contrast:var(--wf-bone-050);
  --overlay-scrim:  rgba(16, 13, 11, 0.45);
}