/* Housemarq Brand Home - design tokens (edit colours, type, glass, motion here) */

:root{
  --bg-1:#eef1ea;--bg-2:#f7f8f3;--bg-3:#e9ece2;
  --ink:#0d1f13;--ink-soft:rgba(13,31,19,.55);--ink-faint:rgba(13,31,19,.38);
  --sage:#2c5a3c;--sage-line:rgba(44,90,60,.1);
  --glass:rgba(255,255,255,.52);
  --r-lg:22px;--r-md:15px;--r-sm:11px;
  --shadow:0 0 0 1px rgba(44,90,60,.07),0 6px 18px rgba(20,60,36,.05);
  --shadow-hover:0 0 0 1px rgba(44,100,66,.14),0 12px 30px rgba(20,60,36,.09);
  --halo-a:rgba(180,205,185,.34);--halo-b:rgba(196,214,198,.28);
  --mark-ink:rgba(20,60,36,.62);
  --ice-1:rgba(255,255,255,.62);--ice-2:rgba(255,255,255,.4);
  --surface:rgba(255,255,255,.7);--light:rgba(255,255,255,.9);--fog:rgba(247,248,243,.6);
  --stone:rgba(20,60,36,.10);--reflection:rgba(255,255,255,.5);
  --transition:.6s cubic-bezier(.22,1,.36,1);--radius:15px;--glass-shell-blur:40px;--glass-shell-sat:170%;--glass-card-blur:22px;--glass-card-sat:170%;--glass-panel-blur:30px;--glass-panel-sat:180%;--glass-edge:inset 0 1px 0 rgba(255,255,255,.5);
  --portal-glow:rgba(180,205,185,.34);--environment-tint:transparent;
  --display:'Fraunces',Georgia,serif;--body:'Inter',-apple-system,system-ui,sans-serif;
  --b1:#1c2b22;--b2:#f3efe6;--b3:#b4915a;--b4:#4e6b5a;--b5:#0e1a14;
}
/* Ground easing - register the environment colours as animatable so the brand ground glides between palettes on a live colour edit instead of snapping. Browsers without @property simply skip the ease (graceful). */
@property --bg-1{syntax:'<color>';inherits:true;initial-value:#eef1ea;}
@property --bg-2{syntax:'<color>';inherits:true;initial-value:#f7f8f3;}
@property --bg-3{syntax:'<color>';inherits:true;initial-value:#e9ece2;}
@property --halo-a{syntax:'<color>';inherits:true;initial-value:rgba(180,205,185,.34);}
@property --halo-b{syntax:'<color>';inherits:true;initial-value:rgba(196,214,198,.28);}
@property --environment-tint{syntax:'<color>';inherits:true;initial-value:transparent;}
@media (prefers-reduced-motion:no-preference){
  :root{transition:--bg-1 .8s cubic-bezier(.22,1,.36,1),--bg-2 .8s cubic-bezier(.22,1,.36,1),--bg-3 .8s cubic-bezier(.22,1,.36,1),--halo-a .8s ease,--halo-b .8s ease,--environment-tint .8s ease;}
  @keyframes md-arrive-logo{from{opacity:0;transform:translateY(14px) scale(.9);}to{opacity:1;transform:none;}}
  @keyframes md-arrive-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  html.brand-arriving{transition:--bg-1 3s cubic-bezier(.3,.7,.2,1),--bg-2 3s cubic-bezier(.3,.7,.2,1),--bg-3 3s cubic-bezier(.3,.7,.2,1),--halo-a 3s ease,--halo-b 3s ease,--environment-tint 3s ease;}
  html.brand-arriving body{transition:background 3s ease;}
  #home.arriving .home-logo{animation:md-arrive-logo 1.5s cubic-bezier(.22,1,.36,1) .5s both;}
  #home.arriving .welcome{animation:md-arrive-in 1.2s cubic-bezier(.22,1,.36,1) 1.1s both;}
  #home.arriving .welcome-sub{animation:md-arrive-in 1.2s cubic-bezier(.22,1,.36,1) 1.5s both;}
  #home.arriving .rooms .room-card{animation:md-arrive-in 1.1s cubic-bezier(.22,1,.36,1) both;}
  #home.arriving .rooms .room-card:nth-child(1){animation-delay:2s;}
  #home.arriving .rooms .room-card:nth-child(2){animation-delay:2.25s;}
  #home.arriving .rooms .room-card:nth-child(3){animation-delay:2.5s;}
  #home.arriving .rooms .room-card:nth-child(4){animation-delay:2.75s;}
  #home.arriving .rooms .room-card:nth-child(5){animation-delay:3s;}
  #home.arriving .rooms .room-card:nth-child(6){animation-delay:3.25s;}
  @media(prefers-reduced-motion:reduce){html.brand-arriving{transition:none;}#home.arriving .home-logo,#home.arriving .welcome,#home.arriving .welcome-sub,#home.arriving .rooms .room-card{animation:none;}}
}
body.deep-immerse{
  --ink:rgba(246,248,244,.94);--ink-soft:rgba(246,248,244,.6);--ink-faint:rgba(246,248,244,.4);
  --glass:rgba(255,255,255,.06);--ice-1:rgba(255,255,255,.08);--ice-2:rgba(255,255,255,.035);
  --surface:rgba(255,255,255,.07);--light:rgba(255,255,255,.12);--fog:rgba(255,255,255,.05);
  --sage-line:rgba(255,255,255,.14);--stone:rgba(255,255,255,.12);--reflection:rgba(255,255,255,.10);
  --mark-ink:rgba(246,248,244,.72);
  --shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.34);
  --shadow-hover:0 0 0 1px rgba(255,255,255,.16),0 16px 42px rgba(0,0,0,.46);
}