/* Semantic material tokens apply every palette to the complete interface. */
/* A thin bright edge and a shaded lower edge give glass its thickness.
   Content cards use tint only; backdrop blur stays on the small chrome/panel. */
html[data-palette]{
  --glass:color-mix(in srgb,var(--surface) 65%,transparent);
  --glass-line:var(--glass-rim);
  --glass-edge:color-mix(in srgb,var(--accent) 14%,transparent);
  --glass-reflection:color-mix(in srgb,var(--glass-light) 65%,transparent);
  --glass-depth:inset 0 1px 0 var(--glass-rim),inset 1px 0 0 var(--glass-reflection),inset 0 -1px 0 var(--glass-edge),0 8px 24px var(--glass-shadow);
  --shadow:0 8px 24px var(--glass-shadow);
}
html[data-palette] body{background:radial-gradient(ellipse at 7% 12%,var(--aura-one),transparent 48%),radial-gradient(ellipse at 94% 28%,var(--aura-two),transparent 48%),linear-gradient(125deg,transparent 44%,var(--glass-light) 44.2%,transparent 57.2%),var(--bg);background-attachment:fixed}
html[data-palette] :is(.glass,.top-capsule,.floating-footer){background:linear-gradient(135deg,var(--glass-reflection),transparent 38%,transparent 72%,var(--glass-reflection)),var(--glass);border-color:var(--glass-rim);box-shadow:var(--glass-depth)}
html[data-palette] .rail:before{background:linear-gradient(130deg,var(--glass-light),transparent),var(--glass);border-color:var(--glass-rim);box-shadow:var(--glass-depth)}
html[data-palette] .rail-lens{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 72%,var(--surface)),var(--accent));border-color:var(--glass-rim);box-shadow:inset 0 2px 2px #ffffff60,inset 0 -2px 3px #0002,0 6px 18px var(--glass-shadow)}
html[data-palette] .rail a.active,html[data-palette] .rail .tablet-more.active{color:var(--on-accent)}
html[data-palette] :is(.panel,.metric,.client-card,.product-card){border-color:color-mix(in srgb,var(--glass-rim) 75%,var(--line));box-shadow:var(--glass-depth)}
html[data-palette] .panel:has(>.empty-state),html[data-palette] .metric:not(.accent){background:linear-gradient(135deg,var(--glass-reflection),transparent 45%,color-mix(in srgb,var(--aura-two) 12%,transparent)),color-mix(in srgb,var(--surface) 67%,transparent);border-color:var(--glass-rim)}
html[data-palette] .metric.accent{background:linear-gradient(130deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 65%,transparent));border-color:color-mix(in srgb,var(--accent) 18%,var(--surface))}
html[data-palette] .btn.primary{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,var(--surface)),var(--accent));border-color:var(--accent);color:var(--on-accent);box-shadow:inset 0 1px #ffffff40,0 5px 14px var(--glass-shadow)}
html[data-palette] .hero-banner{background:linear-gradient(135deg,var(--hero),color-mix(in srgb,var(--hero) 84%,#000));color:#fff}
html[data-palette] .hero-banner :is(small,.eyebrow){color:#ffffffba}
html[data-palette] .hero-banner .btn{background:#ffffff12;color:#fff;border-color:#ffffff40}
html[data-palette] .segment{background:color-mix(in srgb,var(--soft) 70%,transparent);border-color:var(--glass-rim)}
html[data-palette] .segment-lens{background:linear-gradient(135deg,var(--glass-light),transparent),var(--glass);border-color:var(--glass-rim);box-shadow:inset 0 1px 1px var(--glass-rim),0 3px 10px var(--glass-shadow)}
html[data-palette] #dialog,html[data-palette] #dialog[open]{background:linear-gradient(130deg,var(--glass-light),transparent 55%,color-mix(in srgb,var(--aura-one) 30%,transparent)),color-mix(in srgb,var(--surface) 76%,transparent);border-color:var(--glass-rim);box-shadow:inset 0 1px 0 var(--glass-rim),inset 1px 0 0 var(--glass-reflection),inset 0 -1px 0 var(--glass-edge),0 24px 64px #0003}
html[data-palette] .dialog-top,html[data-palette] .dialog-actions{background:linear-gradient(125deg,var(--glass-light),transparent),color-mix(in srgb,var(--surface) 50%,transparent);border-color:var(--glass-rim);box-shadow:inset 0 1px var(--glass-rim)}
html[data-palette] .dialog-tools .icon-btn{background:color-mix(in srgb,var(--surface) 38%,transparent);border-color:var(--glass-rim)}
html[data-palette] .dialog-body .control{background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:var(--line);box-shadow:inset 0 1px 2px var(--glass-shadow)}
html[data-palette] .tablet-menu-link{background:linear-gradient(140deg,var(--glass-light),transparent),color-mix(in srgb,var(--surface) 42%,transparent);border-color:var(--glass-rim);box-shadow:inset 0 1px 1px var(--glass-rim),0 4px 14px var(--glass-shadow)}
html[data-palette] .sheet-grip{background:color-mix(in srgb,var(--muted) 45%,transparent);box-shadow:inset 0 1px var(--glass-rim)}
html[data-palette] :is(.avatar,.board-column,.measure,.upcoming-day){background:var(--soft);color:var(--ink)}
html[data-palette] .board-title strong{background:var(--surface)}
html[data-palette] :is(.daily-count,.product-art){color:var(--accent)}
html[data-palette] .product-card .product-art{background:linear-gradient(135deg,var(--soft),var(--accent-soft))}
html[data-palette] .choice-card:has(input:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
html[data-palette] .selectable-piece:has(input:checked){border-color:var(--accent)}
html[data-palette] input{accent-color:var(--accent)}
html[data-palette] .switch:checked,html[data-palette] .wizard-progress span,html[data-palette] .status-track span.current{background:var(--accent)}
html[data-palette] .status-track span.done{background:color-mix(in srgb,var(--accent) 55%,var(--surface))}
html[data-palette] :is(.result-check,.message-symbol){background:var(--accent-soft);color:var(--accent)}
html[data-palette] #toast{background:var(--hero);color:#fff;border-color:#ffffff30}html[data-palette] #toast .icon{color:#fff}
html[data-palette] .auth-card{background:linear-gradient(140deg,color-mix(in srgb,var(--hero) 86%,transparent),var(--hero));border-color:#ffffff50}
html[data-palette] .auth-diagonal{background:linear-gradient(135deg,color-mix(in srgb,var(--aura-one) 50%,transparent),transparent)}
html[data-palette] .feature-wave{background:linear-gradient(125deg,var(--glass-light),color-mix(in srgb,var(--accent-soft) 18%,transparent),transparent)}
html[data-palette] :is(button,a,input,select,textarea):focus-visible{outline-color:var(--accent)}
.theme-intro{color:var(--muted);font-size:13px;max-width:520px;margin-bottom:22px;line-height:1.7}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.theme-card{text-align:left;border:1px solid var(--line);border-radius:20px;padding:12px;background:linear-gradient(135deg,var(--glass-light),transparent),var(--glass);min-width:0}
.theme-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),inset 0 1px var(--glass-rim)}
.theme-samples{display:grid;grid-template-columns:1fr 1fr;gap:5px;border-radius:12px;overflow:hidden}
.theme-sample{background:radial-gradient(ellipse at top left,var(--sample-aura),transparent),var(--sample-bg);height:102px;padding:10px;display:flex;flex-direction:column;gap:10px;color:var(--sample-ink)}
.sample-chrome{height:12px;border-radius:12px;background:color-mix(in srgb,var(--sample-surface) 60%,transparent);border:1px solid #ffffff50;box-shadow:inset 0 1px #ffffff60}
.sample-layout{display:flex;gap:8px;flex:1}.sample-layout>i{width:15px;border-radius:7px;background:var(--sample-accent);box-shadow:inset 0 1px #ffffff70}.sample-layout>span{display:flex;flex:1;gap:5px}.sample-layout b{flex:1;border:1px solid #ffffff30;border-radius:7px;background:color-mix(in srgb,var(--sample-surface) 60%,transparent);box-shadow:inset 0 1px #ffffff40}
.theme-sample small{color:var(--sample-ink);font-size:9px;letter-spacing:.3px}.theme-card-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 2px 5px}.theme-card-label strong{font-size:14px;font-weight:600}.theme-card>small{display:block;font-size:11px;line-height:1.5;margin:0 2px 3px;color:var(--muted)}
.theme-check{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;opacity:0;background:var(--accent);color:var(--on-accent)}.theme-check .icon{width:13px;height:13px}.theme-card[aria-pressed=true] .theme-check{opacity:1}.theme-current{margin-top:18px;color:var(--muted);font-size:12px}.theme-current strong{color:var(--ink)}
@media(max-width:600px){html[data-palette] .rail{background:linear-gradient(135deg,var(--glass-light),transparent 60%),var(--glass);border-color:var(--glass-rim);box-shadow:var(--glass-depth)}.theme-grid{gap:12px}.theme-card{padding:9px;border-radius:17px}.theme-sample{height:88px;padding:8px;gap:8px}.theme-card>small{min-height:34px;font-size:10px}.theme-card-label strong{font-size:13px}}
html[data-palette][data-opaque=true] :is(.glass,.top-capsule,.rail:before,.panel,.metric:not(.accent),.dialog-top,.dialog-actions,.tablet-menu-link,.theme-card),html[data-palette][data-opaque=true] #dialog{background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@media(max-width:600px){html[data-palette][data-opaque=true] .rail{background:var(--surface)!important}}
@media(prefers-reduced-transparency:reduce){html[data-palette] :is(.glass,.top-capsule,.rail:before,.dialog-top,.dialog-actions,.tablet-menu-link,.theme-card){background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}html[data-palette] #dialog{background:var(--surface)!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-palette] #dialog,html[data-palette] .glass{background:var(--surface)}}
@media(forced-colors:active){.theme-card[aria-pressed=true]{outline:2px solid Highlight}.theme-check{forced-color-adjust:none}}
html[data-palette] .metric.accent strong{color:var(--ink)}
html[data-palette] .metric.accent .metric-top,html[data-palette] .metric.accent small{color:var(--muted)}
html[data-palette] .badge:not(.green):not(.amber):not(.red){background:var(--soft);color:var(--muted)}
.appearance-modes{display:inline-flex;gap:4px;padding:4px;margin:0 0 22px;border:1px solid var(--glass-rim);border-radius:30px;background:var(--soft);box-shadow:inset 0 1px 2px var(--glass-shadow)}
.appearance-modes button{min-width:96px;min-height:44px;padding:0 22px;border-radius:24px;font-size:12px;color:var(--muted)}
.appearance-modes button[aria-pressed=true]{background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 88%,var(--surface)),var(--accent));color:var(--on-accent);box-shadow:inset 0 1px #ffffff50,0 4px 12px var(--glass-shadow)}
@media(max-width:600px){.appearance-modes{display:flex}.appearance-modes button{flex:1}}

/* Fine material pass: shared light, no extra backdrop layers or perpetual motion. */
html[data-palette] .glass:before{
  background:linear-gradient(135deg,var(--glass-reflection),transparent 34%,transparent 76%,var(--glass-reflection));
}
html[data-palette] .glass:after{border-color:color-mix(in srgb,var(--glass-rim) 32%,transparent)}
html[data-palette] .panel:not(:has(>.empty-state)){
  background:linear-gradient(135deg,var(--glass-reflection),transparent 48%),color-mix(in srgb,var(--surface) 86%,transparent);
}
html[data-palette] .btn:not(.primary):not(.text):not(.hero-banner .btn){
  background:linear-gradient(145deg,var(--glass-reflection),transparent 62%),color-mix(in srgb,var(--surface) 78%,transparent);
  border-color:color-mix(in srgb,var(--line) 78%,var(--accent));
  box-shadow:inset 0 1px 0 var(--glass-rim),inset 0 -1px 0 var(--glass-edge),0 3px 8px var(--glass-shadow);
}
/* Reflection moves on a separate layer; text never fades and layout never moves. */
html[data-palette] .btn:before{
  content:'';position:absolute;inset:-45% -25%;pointer-events:none;z-index:-1;
  background:linear-gradient(110deg,transparent 32%,#ffffff26 48%,#ffffff45 50%,transparent 66%);
  transform:translateX(-110%);opacity:0;
  transition:transform 640ms var(--ease-out),opacity 180ms ease;
}
html[data-palette] .btn.primary:before{background:linear-gradient(110deg,transparent 32%,#ffffff18 48%,#ffffff38 50%,transparent 66%)}
html[data-palette] .dialog-sheen{
  background:linear-gradient(90deg,transparent,var(--glass-reflection) 45%,var(--glass-light) 50%,transparent 65%);
}
html[data-palette] .dialog-top{box-shadow:inset 0 1px 0 var(--glass-rim),0 1px 0 var(--glass-edge)}
html[data-palette] .dialog-actions{box-shadow:inset 0 1px 0 var(--glass-rim),0 -6px 18px color-mix(in srgb,var(--glass-shadow) 40%,transparent)}
html[data-palette] :is(.control,.search,.filter-select){
  border-color:color-mix(in srgb,var(--line) 78%,var(--accent));
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--glass-shadow) 65%,transparent);
}
html[data-palette] .search:focus-within{outline:2px solid var(--accent);outline-offset:3px}
html[data-palette] .control:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-palette] .empty-state>.icon{
  box-sizing:content-box;width:28px;height:28px;padding:15px;border-radius:20px;
  color:var(--accent);border:1px solid var(--glass-rim);
  background:linear-gradient(135deg,var(--glass-light),transparent 70%),color-mix(in srgb,var(--accent-soft) 48%,transparent);
  box-shadow:inset 0 1px 0 var(--glass-rim),inset 0 -1px 0 var(--glass-edge),0 5px 16px var(--glass-shadow);
}
html[data-palette] .empty-state p{line-height:1.7}
html[data-palette] .theme-card{box-shadow:var(--glass-depth)}
html[data-palette] .theme-card[aria-pressed=true]{box-shadow:0 0 0 1px var(--accent),var(--glass-depth)}
/* Hover belongs to a fine pointer only. Touch retains the existing localized glow. */
@media(hover:hover) and (pointer:fine){
  html[data-palette] .btn:not(:disabled):not([aria-disabled=true]):hover:before{transform:translateX(40%);opacity:1}
  html[data-palette] .btn:not(:disabled):hover{box-shadow:inset 0 1px 0 var(--glass-rim),0 5px 14px var(--glass-shadow)}
  html[data-palette] :is(.top-tools .icon-btn,.session-button,.search-button):hover{background:color-mix(in srgb,var(--accent-soft) 60%,transparent)}
  html[data-palette] .theme-card:hover{border-color:var(--accent)}
}
/* Palette snapshots must capture final colors, without an intermediate CSS fade. */
html[data-palette] :is(.btn,button:not(:disabled),.tablet-menu-link){transition-property:transform,box-shadow}
html[data-reduce=true] .btn:before,html[data-opaque=true] .btn:before{display:none}
@media(prefers-reduced-motion:reduce){html[data-palette] .btn:before{display:none}}
@media(prefers-reduced-transparency:reduce){
  html[data-palette] :is(.panel,.metric:not(.accent),.floating-footer,.rail,.segment-lens,.btn:not(.primary):not(.text):not(.hero-banner .btn)){background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html[data-palette] :is(.glass:before,.glass:after,.btn:before){display:none}
}
html[data-palette][data-opaque=true] :is(.floating-footer,.segment-lens,.btn:not(.primary):not(.text):not(.hero-banner .btn)){background:var(--surface)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-palette] :is(.top-capsule,.rail,.rail:before,.floating-footer,.dialog-top,.dialog-actions,.segment-lens){background:var(--surface)}
}
@media(forced-colors:active){
  html[data-palette] .btn:before{display:none}
  html[data-palette] :is(.btn,.panel,.metric,.theme-card,.empty-state>.icon){border-color:CanvasText;box-shadow:none}
}