/* Personal Metrik themes. Original uses the normal app tokens without an attribute. */
html[data-theme] { color-scheme: light; }
html[data-theme] {
  --color-background: #fff;
  --color-foreground: #282334;
  --color-card: #fff;
  --color-card-foreground: #282334;
  --color-muted: #f0edf5;
  --color-muted-foreground: #686371;
  --color-border: #e8e4ed;
  --color-border-soft: #e8e4ed;
  --color-popover: #fff;
  --color-popover-foreground: #282334;
  --color-input: #d7d1e0;
  --color-sidebar-header: #fff;
  --color-sidebar-background: #fff;
  --color-sidebar-foreground: #51475e;
  --color-sidebar-muted: #686371;
  --color-sidebar-emphasis: #282334;
  --color-sidebar-hover: #f0edf5;
  --control-secondary-bg: #fff;
  --radius-card: 10px;
  --radius-button: 8px;
  --theme-card-shadow: none;
  --theme-control-shadow: none;
  --dashboard-wod-bg: #f8f6fb;
  --theme-page-bg: var(--color-background);
  --theme-bottom-bg: #fff;
  --theme-pill-bg: #eee7f6;
  --theme-language-bg: #f8f6fb;
  --quick-add-bg: var(--color-button);
  --quick-add-ink: #fff;
  --quick-add-shadow: 0 5px 16px #6a4c9328;
}

html:is([data-theme='white'], [data-theme='graphite'], [data-theme='smokedPlum']) {
  --color-card: #f0ebf7;
  --color-border: #d4c8e3;
  --color-border-soft: #d4c8e3;
  --color-muted: #e5dbef;
  --dashboard-wod-bg: #e7ddf1;
}

html[data-theme='graphite'] {
  --color-background: #24232b;
  --theme-page-bg: linear-gradient(165deg, #302f38 0%, #24232b 45%, #201f26 100%);
}

html[data-theme='smokedPlum'] {
  --color-background: #38303f;
  --theme-page-bg: linear-gradient(165deg, #463b4d 0%, #38303f 45%, #302935 100%);
}

html[data-theme='porcelain'] {
  --color-background: #e6eaf1;
  --color-border: #cfd6e2;
  --color-border-soft: #cfd6e2;
  --color-muted: #eef0f6;
  --control-secondary-bg: #f4f1f9;
  --radius-card: 14px;
  --radius-button: 16px;
  --theme-card-shadow: 0 2px 4px #28233406, 0 8px 28px #28233410;
  --theme-control-shadow: 0 2px 5px #28233408;
  --dashboard-wod-bg: #ebe7f4;
}

html[data-theme='platinum'] {
  --color-background: #cbd1da;
  --color-card: #f7f8fa;
  --color-card-foreground: #242831;
  --color-foreground: #242831;
  --color-muted-foreground: #59616d;
  --color-muted: #e4e8ed;
  --color-border: #c2c9d3;
  --color-border-soft: #c2c9d3;
  --color-input: #b9c1cc;
  --color-button: #493265;
  --color-button-dark: #39244f;
  --control-secondary-bg: #e9edf2;
  --theme-card-shadow: 0 1px 2px #2428310a, 0 4px 10px #24283112;
  --dashboard-wod-bg: #e9edf3;
}

html[data-theme='obsidianPearl'] {
  --color-background: #292a30;
  --color-card: #f5f3f8;
  --color-card-foreground: #2c2833;
  --color-foreground: #2c2833;
  --color-muted-foreground: #655e70;
  --color-muted: #e5e0ec;
  --color-border: #d0c8db;
  --color-border-soft: #d0c8db;
  --color-input: #c5bbd2;
  --color-button: #4d356c;
  --color-button-dark: #3b2756;
  --control-secondary-bg: #e8e3ef;
  --theme-card-shadow: 0 2px 6px #11121720;
  --dashboard-wod-bg: #e8e3f0;
}

/* Arena and Precision also tailor typography and control surfaces. */
html:is([data-theme='arena'], [data-theme='precision']) {
  --color-input-bg: var(--color-card);
  --color-card-foreground: var(--color-foreground);
  --color-border-soft: var(--color-border);
  --color-popover: var(--color-card);
  --color-popover-foreground: var(--color-foreground);
  --color-primary-foreground: #fff;
  --color-secondary: var(--color-primary);
  --color-button: var(--color-primary);
  --color-button-dark: var(--color-primary-dark);
  --color-button-foreground: #fff;
  --control-secondary-bg: var(--color-muted);
  --color-sidebar-header: #fff;
  --color-sidebar-background: #fff;
  --color-sidebar-foreground: #202a3a;
  --color-sidebar-muted: #475569;
  --color-sidebar-emphasis: #111b2c;
  --color-sidebar-hover: #edf1f6;
  --theme-bottom-bg: #fff;
  --theme-language-bg: #fff;
  --theme-pill-bg: var(--color-primary-bg);
  --quick-add-shadow: none;
}


html[data-theme='arena'] {
  --color-background: #080f1d;
  --color-card: #152339;
  --color-foreground: #f3f7ff;
  --color-muted-foreground: #b7c7dc;
  --color-muted: #243750;
  --color-border: #4e6582;
  --color-input: #6b83a2;
  --color-primary: #8fc4ff;
  --color-primary-dark: #61a5f8;
  --color-primary-light: #bbddff;
  --color-primary-bg: #28425f;
  --radius-card: 18px;
  --radius-button: 10px;
  --dashboard-wod-bg: #1a3050;
  --theme-card-shadow: none;
}

html[data-theme='precision'] {
  --color-background: #eef0f3;
  --color-card: #ffffff;
  --color-foreground: #111b2c;
  --color-muted-foreground: #475569;
  --color-muted: #f1f4f8;
  --color-border: #b3bdcb;
  --color-input: #8b99ae;
  --color-primary: #164ed1;
  --color-primary-dark: #103ca5;
  --color-primary-light: #4c79e3;
  --color-primary-bg: #e4edff;
  --radius-card: 4px;
  --radius-button: 4px;
  --dashboard-wod-bg: #ffffff;
  --theme-card-shadow: none;
}

html[data-theme='arena'] {
  --color-primary-foreground: #081426;
  --color-button: #245be0;
  --color-button-dark: #1945b5;
}

html[data-theme] .app-layout {
  background: var(--theme-page-bg);
}



html[data-theme] .appbar {
  border-bottom: 1px solid var(--color-border);
}




html[data-theme] .appbar button[class*='border-white'] {
  color: var(--color-sidebar-foreground);
  border-color: var(--color-border);
  background: var(--theme-language-bg);
}

/* The idle AI label has an inline shimmer intended for dark chrome. Keep the
   live/listening states intact; only adapt the idle wordmark on white. */
html[data-theme] .appbar .ai-wordmark {
  -webkit-text-fill-color: var(--color-primary) !important;
  background-image: none !important;
}

html[data-theme] .shadow-card {
  box-shadow: var(--theme-card-shadow);
  background-image: none;
}

html[data-theme] :is(.shadow-glass, .shadow-control, .shadow-control-strong) {
  box-shadow: var(--theme-control-shadow);
}

html[data-theme] .bg-button-gradient {
  background: var(--color-button);
}

html[data-theme] .bottom-surface {
  background: var(--theme-bottom-bg);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  box-shadow: 0 -4px 24px #2823340b;
}

html[data-theme] .bottom-surface nav > button svg {
  color: var(--color-muted-foreground);
}

html[data-theme] .bottom-surface [data-sliding-active='true'] svg {
  color: var(--color-primary);
}

html[data-theme] .bottom-pill {
  background: var(--theme-pill-bg);
}

html[data-theme] .quick-add {
  color: var(--quick-add-ink);
  background: var(--quick-add-bg);
  box-shadow: var(--quick-add-shadow);
}

html[data-theme] .dashboard-wod {
  background: var(--dashboard-wod-bg);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  box-shadow: var(--theme-card-shadow);
}

html[data-theme] .dashboard-wod [class*='text-white'] {
  color: var(--color-muted-foreground);
}

html[data-theme] .dashboard-wod [class*='border-white'] {
  border-color: var(--color-border);
}

html[data-theme] .dashboard-wod .bg-button-gradient {
  color: #fff;
}

html[data-theme] .dashboard-wod-empty {
  background: transparent;
  border-color: transparent;
}

html[data-theme] .dashboard-wod-empty > button {
  background: var(--color-button);
  color: #fff;
  box-shadow: none;
}



/* Precision's navigation uses a neutral surface. */
html[data-theme='precision'] :is(.appbar, .bottom-surface) {
  --color-foreground: #141b28;
  --color-muted-foreground: #475569;
  --color-muted: #eef1f6;
  --color-border: #bcc4cf;
  --color-border-soft: #bcc4cf;
}
html[data-theme='arena'] {
  color-scheme: dark;
  --color-sidebar-header: #101c30;
  --color-sidebar-background: #152339;
  --color-sidebar-foreground: #f3f7ff;
  --color-sidebar-muted: #b7c7dc;
  --color-sidebar-emphasis: #fff;
  --color-sidebar-hover: #243750;
  --theme-bottom-bg: #101c30;
  --theme-language-bg: #152339;
}
html:is([data-theme='arena'], [data-theme='precision']) .app-wordmark { font-size: var(--app-wordmark-size); font-weight: 800; }
html:is([data-theme='arena'], [data-theme='precision']) .dashboard .shadow-card h3 {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--color-foreground);
}
html:is([data-theme='arena'], [data-theme='precision']) .dashboard .shadow-card h3.sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}
html:is([data-theme='arena'], [data-theme='precision']) :is(.shadow-glass, .shadow-control, .shadow-control-strong) {
  backdrop-filter: none;
  background-image: none;
  border-color: var(--color-input);
}
html:is([data-theme='arena'], [data-theme='precision']) .from-white {
  background: var(--color-muted);
  border-color: var(--color-border);
  color: var(--color-foreground);
}
html:is([data-theme='arena'], [data-theme='precision']) [_echarts_instance_] text {
  fill: var(--color-foreground);
  font-weight: 600;
}
html:is([data-theme='arena'], [data-theme='precision']) .chart-legend {
  color: var(--color-foreground);
  background: var(--color-card);
  border-color: var(--color-border);
  box-shadow: none;
}
html:is([data-theme='arena'], [data-theme='precision']) .chart-legend.opacity-50 {
  opacity: 1;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
}
html:is([data-theme='arena'], [data-theme='precision']) .chart-legend.opacity-50 > span:first-child {
  opacity: 0.35;
}
html:is([data-theme='arena'], [data-theme='precision']) .dashboard-wod::before,
html:is([data-theme='arena'], [data-theme='precision']) .dashboard-wod::after { display: none; }


html[data-theme='arena'] .dashboard .shadow-card {
  border: 1px solid #4e6582;
  border-top: 3px solid #70adff;
}
html[data-theme='arena'] .dashboard .shadow-card h3 { font-size: 18px; }
html[data-theme='arena'] .dashboard-wod { border-left: 5px solid #70adff; }
html[data-theme='arena'] .dashboard .bg-primary-gradient:not(.dashboard-wod) {
  background: #8fc4ff;
  color: #081426;
}
html[data-theme='arena'] [_echarts_instance_] [stroke='#E5E7EB'] {
  stroke: #3a506c;
}
html[data-theme='arena'] .bg-white {
  background-color: var(--color-card);
}

html[data-theme='precision'] .appbar { border-bottom: 2px solid #164ed1; }
html[data-theme='precision'] .dashboard .shadow-card {
  border: 0;
  border-top: 2px solid #164ed1;
}
html[data-theme='precision'] .dashboard .shadow-card h3 {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
html[data-theme='precision'] .dashboard .tabular-nums {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
html[data-theme='precision'] .from-white {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #164ed1;
}
html[data-theme='precision'] .dashboard .chart-legend {
  border-radius: 0;
  border-width: 0 0 2px;
}
html[data-theme='precision'] .dashboard-wod {
  border: 0;
  border-left: 3px solid #164ed1;
  border-radius: 0;
}

html:is([data-theme='arena'], [data-theme='precision']) .dashboard-wod > .pointer-events-none {
  display: none;
}

html[data-theme='arena'] [_echarts_instance_] [fill='#6A4C93'] {
  fill: #8fc4ff;
}

html[data-theme] body { background: var(--color-background); }
html[data-theme] .bg-card { color: var(--color-card-foreground); }
html[data-theme] .app-layout { min-height: 100svh; }
html[data-theme] .app-wordmark { color: var(--color-sidebar-emphasis); }
html[data-theme] .appbar { color: var(--color-sidebar-foreground); }
html[data-theme] .theme-choice { color: var(--color-card-foreground); }
html[data-theme] .bg-popover { color: var(--color-popover-foreground); }
html[data-theme='arena'] .chart-legend { background: var(--color-card); }
html[data-theme='arena'] [role='dialog'] { color: var(--color-card-foreground); }
html[data-theme='arena'] :is(.bg-input-bg, input, textarea, select) { color-scheme: dark; }
html[data-theme='arena'] .input-inset { background: var(--color-card); color: var(--color-foreground); }
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) {
  --color-page-foreground: #f4effa;
  --color-page-muted: #ccc4d8;
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) .settings-navigation {
  --color-foreground: var(--color-page-foreground);
  --color-muted-foreground: var(--color-page-muted);
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) .settings-layout > :first-child {
  --color-muted-foreground: var(--color-page-muted);
}

/* Separate dark page text from the retained light card surfaces. */
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) {
  --color-foreground: #f4effa;
  --color-muted-foreground: #ccc4d8;
  --color-card-muted-foreground: #655e70;
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) :is(.bg-card, .bg-popover, .bg-white, .bg-input-bg, .shadow-glass, .dashboard-wod, .appbar, .bottom-surface) {
  --color-foreground: var(--color-card-foreground);
  --color-muted-foreground: var(--color-card-muted-foreground);
  color: var(--color-foreground);
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) :is(.page-tabs-track, .segmented-track) {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: none;
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) :is(.page-tabs-indicator, .segmented-indicator) {
  background: var(--color-button);
  border-radius: 8px;
  box-shadow: none;
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) :is(.page-tabs-track, .segmented-track) button {
  color: var(--color-card-muted-foreground);
  border-radius: 8px;
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) :is(.page-tabs-track, .segmented-track) button[data-sliding-active='true'] {
  color: #fff;
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) :is(.page-tabs-track, .segmented-track) button[data-sliding-active='false']:hover {
  color: var(--color-card-foreground);
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) .page-tabs > button {
  color: var(--color-page-foreground);
}
html:is([data-theme='graphite'], [data-theme='smokedPlum'], [data-theme='obsidianPearl']) [_echarts_instance_] text {
  fill: var(--color-foreground);
}

/* Authentication always uses a light surface, including on a direct page load.
   Tenant accent colors and logos still come from brand.css. */
html[data-auth-surface='light'] {
  color-scheme: light;
  --color-background: #faf9fc;
  --color-foreground: #242333;
  --color-card: #fff;
  --color-card-foreground: #242333;
  --color-muted: #f0edf5;
  --color-muted-foreground: #615e6d;
  --color-popover: #fff;
  --color-popover-foreground: #242333;
  --color-border: #ded9e6;
  --color-border-soft: #ded9e6;
  --color-input-bg: #fff;
  --control-secondary-bg: #fff;
}
html[data-auth-surface='light'] body { background: #faf9fc; color: #242333; }

/* Colored badges keep their own ink/fill pair when the theme removes glass
   decoration. Surface text overrides must not turn calorie chips monochrome. */
html[data-theme] .bg-primary-gradient:is(.shadow-glass, .shadow-control, .shadow-control-strong) {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}