/* HYBRI8 Design Tokens — canonical visual identity */
@import url("premium-surfaces.css");
:root{
  --hybri8-bg:#071016;
  --hybri8-bg-2:#0b1419;
  --hybri8-panel:#0d171d;
  --hybri8-panel-2:#111c22;
  --hybri8-text:#f5f7f6;
  --hybri8-muted:#9fa9a3;
  --hybri8-bronze:#d5a173;
  --hybri8-bronze-2:#e7b98f;
  --hybri8-bronze-3:#f1d1b5;
  --hybri8-line:rgba(221,177,141,.20);
  --hybri8-radius:24px;
  --hybri8-shadow:0 24px 70px rgba(0,0,0,.38);

  --bg:var(--hybri8-bg)!important;
  --panel:var(--hybri8-panel)!important;
  --panel2:var(--hybri8-panel-2)!important;
  --text:var(--hybri8-text)!important;
  --muted:var(--hybri8-muted)!important;
  --line:var(--hybri8-line)!important;
  --accent:var(--hybri8-bronze)!important;
  --lime:var(--hybri8-bronze)!important;
  --lime2:var(--hybri8-bronze-2)!important;
  --soft:var(--hybri8-bronze-3)!important;
  --r:var(--hybri8-radius)!important;
  --shadow:var(--hybri8-shadow)!important;
}

/* Canonical native-feeling controls for token-based surfaces */
.primary-btn{
  background:linear-gradient(180deg,var(--hybri8-bronze-2),var(--hybri8-bronze))!important;
  color:#17110c!important;
  box-shadow:0 12px 32px rgba(185,119,71,.20),inset 0 1px 0 rgba(255,255,255,.24)!important;
  transition:transform 150ms ease,filter 160ms ease,box-shadow 160ms ease;
}
.primary-btn:active{transform:scale(.985)}
.bottom-nav{
  background:rgba(8,15,19,.91)!important;
  border-color:rgba(231,185,143,.18)!important;
  box-shadow:0 22px 64px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(24px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.08)!important;
}
.bottom-nav .active{background:rgba(213,161,115,.10)!important;color:var(--hybri8-bronze-2)!important}
.bottom-nav a,.bottom-nav button{transition:background 150ms ease,color 150ms ease,transform 150ms ease}
.bottom-nav a:active,.bottom-nav button:active{transform:scale(.96)}

/* Mobile/native finish: safe touch, focus and motion without extra visual noise */
.primary-btn,.bottom-nav a,.bottom-nav button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.primary-btn:focus-visible,.bottom-nav a:focus-visible,.bottom-nav button:focus-visible,.back-link:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--hybri8-bg),0 0 0 4px rgba(231,185,143,.62)!important;
}
@media(max-width:640px){
  .shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .bottom-nav{width:min(650px,calc(100% - 16px))!important;bottom:max(6px,env(safe-area-inset-bottom))!important;border-radius:20px!important}
  .bottom-nav a,.bottom-nav button{min-height:50px}
  .hero h1{letter-spacing:-.055em}
}
@media(prefers-reduced-motion:reduce){
  .primary-btn,.bottom-nav a,.bottom-nav button{transition:none!important}
  .primary-btn:active,.bottom-nav a:active,.bottom-nav button:active{transform:none!important}
}
@media(prefers-contrast:more){
  .bottom-nav,.primary-btn{border:2px solid rgba(241,209,181,.62)!important}
}


/* PREMIUM MOBILE X20 — canonical cross-app mobile tokens */
:root{
  --hybri8-space-1:4px;
  --hybri8-space-2:8px;
  --hybri8-space-3:12px;
  --hybri8-space-4:16px;
  --hybri8-space-5:20px;
  --hybri8-space-6:24px;
  --hybri8-space-8:32px;
  --hybri8-radius-control:16px;
  --hybri8-radius-card:22px;
  --hybri8-radius-hero:30px;
  --hybri8-control-min:48px;
  --hybri8-safe-bottom:max(12px,env(safe-area-inset-bottom));
  --hybri8-focus-ring:0 0 0 2px var(--hybri8-bg),0 0 0 4px rgba(231,185,143,.68);
  --hybri8-shadow-card:0 20px 60px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
  --hybri8-shadow-float:0 24px 70px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.04);
}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:120px}
body{min-width:320px}
button,a,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
.primary-btn,.secondary-btn,.finish-btn,.resume-action,.btn{
  min-height:var(--hybri8-control-min);
  border-radius:var(--hybri8-radius-control);
}
:is(.primary-btn,.secondary-btn,.finish-btn,.resume-action,.btn,.back,.back-link,.bottom-nav a,.bottom-nav button):focus-visible{
  outline:none;
  box-shadow:var(--hybri8-focus-ring)!important;
}
@media(max-width:640px){
  .shell{
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  input,select,textarea{font-size:16px!important}
  .primary-btn,.secondary-btn,.finish-btn,.resume-action,.btn{min-height:50px}
}
@media(pointer:coarse){
  button,a{min-height:44px}
}