/* Hue roles live here; material rules still own opacity, blur and geometry. */
html[data-theme][data-material]{color:var(--ink);background:var(--page);--surface:rgb(var(--paper-rgb) / .72);--solid:rgb(var(--solid-rgb));--glass:rgb(var(--paper-rgb) / .6);--shadow:0 10px 40px rgb(var(--ink-rgb) / .043)}
html[data-theme="dark"][data-material]{--surface:rgb(var(--paper-rgb));--glass:rgb(var(--solid-rgb) / .65);--shadow:0 10px 35px #0000000c}
html[data-theme][data-material="hyalite"]{--surface:rgb(var(--paper-rgb) / .16);--solid:rgb(var(--solid-rgb) / .79);--glass:rgb(var(--paper-rgb) / .0784)}
html[data-theme="dark"][data-material="hyalite"]{--surface:rgb(var(--paper-rgb) / .34);--solid:rgb(var(--solid-rgb) / .93);--glass:rgb(var(--paper-rgb) / .22)}
html[data-theme][data-material="hyalite"] .sheet{--glass:rgb(var(--wash-rgb) / .85)}
html[data-theme="dark"][data-material="hyalite"] .sheet{--glass:rgb(var(--wash-rgb) / .92)}
html[data-theme][data-material="hyalite"]{--shadow:0 12px 34px rgb(var(--ink-rgb) / .05)}
html[data-theme="dark"][data-material="hyalite"]{--shadow:0 12px 34px #0002}

html[data-background="custom"] #wallpaper::after{background:rgb(var(--wash-rgb) / .45)}
html[data-theme="dark"] #wallpaper::after{background:rgb(var(--wash-rgb) / .85)}
html[data-theme="dark"][data-background="custom"] #wallpaper::after{background:rgb(var(--wash-rgb) / .65)}
html[data-theme][data-material="hyalite"][data-background="custom"] #wallpaper::after{background:rgb(var(--wash-rgb) / .0784)}
html[data-theme="dark"][data-material="hyalite"][data-background="custom"] #wallpaper::after{background:rgb(var(--wash-rgb) / .4)}

html[data-theme] :is(.brand-icon,.food-thumb,.empty-symbol){background:var(--tone-soft);color:var(--green)}
html[data-theme] :is(.primary,.add-button){background:var(--primary-fill);color:var(--primary-ink);border:1px solid var(--tone-line)}
html[data-theme] .add-button{box-shadow:0 4px 14px var(--tone-shadow)}
html[data-theme] :is(.secondary,.close,.pill,.photo-button,.recent-pill,.insight-tabs){background:var(--tone-soft)}
html[data-theme] :is(.meal-head .icon,.feedback){color:var(--green)}
html[data-theme][data-material] .nav-button{color:var(--muted)}
html[data-theme][data-material] .nav-button.active{color:var(--green)}
html[data-theme] .connection:not(.offline)::before{background:var(--green)}
html[data-theme] .calendar-day.has-data{background:var(--tone-soft)}
html[data-theme] .calendar-day.selected{border-color:var(--green);background:var(--tone-mid)}
html[data-theme] .pending-card{border-color:var(--tone-line)}
html[data-theme] .spinner{border-color:var(--tone-line);border-top-color:var(--green)}
html[data-theme] .dock-indicator{background:var(--tone-soft)}
html[data-theme][data-material="hyalite"] .dock-indicator{background:linear-gradient(140deg,#ffffff38,#ffffff10)}
html[data-theme="dark"][data-material="hyalite"] .dock-indicator{background:#ffffff14}
html[data-theme] .bar{background:var(--chart-color)}
html[data-theme] .bar.missing{background:var(--tone-mid)}
html[data-theme] .weight-point{fill:var(--tone-point)}
html[data-theme] .ring-bg{stroke:var(--tone-soft)}
html[data-theme] .ring-progress{stroke:var(--chart-color)}
html[data-theme] .energy-ring g{color:var(--green)}
html[data-theme] .macro-line{background:var(--tone-mid)}
html[data-theme] .macro:nth-child(2) .macro-line{background:var(--tone-line)}
html[data-theme] .macro:nth-child(3) .macro-line{background:var(--tone-soft)}
html[data-theme] :is(.sheet textarea,input)::placeholder{color:var(--muted);opacity:.8}
html[data-theme] .sheet::backdrop{background:rgb(var(--wash-rgb) / .25)}
html[data-theme="dark"] .sheet::backdrop{background:rgb(var(--wash-rgb) / .55)}
html[data-theme][data-material="hyalite"] :is(.pending-card,.source-note){background:rgb(var(--paper-rgb) / .12)}
html[data-theme="dark"][data-material="hyalite"] :is(.pending-card,.source-note){background:rgb(var(--paper-rgb) / .2784)}
html[data-theme] :is(.material-choice,.swatch-custom){background-color:var(--tone-soft)}

.color-settings{margin-top:24px}
.color-modes{display:flex;gap:5px;padding:4px;border-radius:14px;background:var(--tone-soft);margin-bottom:14px}
.color-modes button{flex:1;min-height:40px;background:transparent;border-radius:11px;font-size:12px;color:var(--muted)}
.color-modes button.selected{background:var(--solid);color:var(--green);box-shadow:0 2px 7px #00000009}
.theme-swatches{display:flex;flex-wrap:wrap;gap:4px}
.theme-color-choice,.custom-color-choice{width:44px;height:46px;padding:5px;background:transparent;border-radius:50%;position:relative;display:grid;place-items:center;cursor:pointer}
.theme-color-dot,.custom-color-dot{width:28px;height:28px;display:block;border-radius:50%;border:1px solid #80808044;position:relative;background:var(--swatch)}
.theme-color-choice.selected .theme-color-dot,.custom-color-choice.selected .custom-color-dot{outline:2px solid var(--green);outline-offset:4px}
.theme-color-choice.selected .theme-color-dot::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--swatch-check)}
.theme-color-choice[data-theme-color="clear"] .theme-color-dot{background:repeating-conic-gradient(#a5a5a555 0% 25%,#ffffff88 0% 50%) 50% / 10px 10px}
.custom-color-choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.custom-color-dot{display:grid;place-items:center;color:#fff;font-size:19px;background:conic-gradient(#cb889c,#c3a46b,#80a189,#7c9fb9,#a18bc0,#cb889c)}
.custom-color-choice:focus-within .custom-color-dot{outline:2px solid var(--green);outline-offset:4px}
.color-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px;font-size:11px;color:var(--muted)}
.color-caption code{font-family:inherit;font-variant-numeric:tabular-nums}
.settings-card #color-status{margin:7px 0 0;font-size:11px;line-height:1.8}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html[data-theme][data-material]{--surface:var(--page);--solid:var(--page);--glass:var(--page)}
  html[data-theme][data-material] .sheet{--glass:var(--page)}
  html[data-theme][data-material] .dock-indicator{background:var(--tone-mid);border-color:var(--green)}
  html[data-theme][data-color-style="clear"] :is(.primary,.add-button){background:var(--solid)}
}
@media(forced-colors:active){.theme-color-choice.selected .theme-color-dot{outline-color:Highlight}.color-modes button.selected{outline:2px solid Highlight}}