/* ==========================================================================
   TDEEGuide Universal Theme Architecture (Light & Dark Mode)
   ========================================================================== */

:root {
  color-scheme: light;
  --color-bg: #f9f9ff;
  --color-on-bg: #111c2d;
  --color-surface: #f9f9ff;
  --color-on-surface: #111c2d;
  --color-on-surface-variant: #475569;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f0f4ff;
  --color-surface-container: #e6edff;
  --color-surface-container-high: #dbe5fc;
  --color-surface-container-highest: #d2def8;
  --color-outline: #566577;
  --color-outline-variant: #cbd5e1;

  --color-primary: #00694d;
  --color-primary-container: #008562;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #f5fff8;
  --color-primary-fixed: #80f9ca;
  --color-primary-fixed-dim: #62dcaf;

  --color-secondary: #006a61;
  --color-secondary-container: #79f7e7;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #004d47;
  --color-secondary-fixed: #79f7e7;
  --color-secondary-fixed-dim: #5adacb;

  --color-tertiary: #475569;
  --color-tertiary-container: #64748b;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #f8fafc;
  --color-tertiary-fixed: #d9e2fc;
  --color-tertiary-fixed-dim: #bdc6e0;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;
}

html.dark {
  color-scheme: dark;
  --color-bg: #0b0f19;
  --color-on-bg: #f1f5f9;
  --color-surface: #0b0f19;
  --color-on-surface: #f8fafc;
  /* High-contrast muted text for dark backgrounds */
  --color-on-surface-variant: #cbd5e1;
  --color-surface-container-lowest: #111827;
  --color-surface-container-low: #172033;
  --color-surface-container: #1e293b;
  --color-surface-container-high: #27354d;
  --color-surface-container-highest: #334155;
  --color-outline: #94a3b8;
  --color-outline-variant: #475569;

  --color-primary: #34d399;
  --color-primary-container: #059669;
  --color-on-primary: #022c22;
  --color-on-primary-container: #ecfdf5;
  --color-primary-fixed: #6ee7b7;
  --color-primary-fixed-dim: #34d399;

  --color-secondary: #2dd4bf;
  --color-secondary-container: #0f766e;
  --color-on-secondary: #042f2c;
  --color-on-secondary-container: #ccfbf1;
  --color-secondary-fixed: #5eead4;
  --color-secondary-fixed-dim: #2dd4bf;

  --color-tertiary: #a5b4fc;
  --color-tertiary-container: #334155;
  --color-on-tertiary: #0f172a;
  --color-on-tertiary-container: #f1f5f9;
  --color-tertiary-fixed: #c7d2fe;
  --color-tertiary-fixed-dim: #a5b4fc;

  --color-error: #f87171;
  --color-error-container: #7f1d1d;
  --color-on-error: #450a0a;
  --color-on-error-container: #fecaca;
}

/* ==========================================================================
   Base Elements & Global Smoothness
   ========================================================================== */

body {
  background-color: var(--color-bg);
  color: var(--color-on-surface);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

img[src*="logo.svg"] {
  height: 2rem;
  width: auto;
}

.brand-wordmark {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  white-space: nowrap;
}

.brand-wordmark .brand-accent {
  color: var(--color-primary);
}

/* ==========================================================================
   Dark Mode Explicit Component Overrides
   ========================================================================== */

html.dark body,
html.dark main,
html.dark section.bg-background,
html.dark section.bg-surface {
  background-color: #0b0f19 !important;
  color: #f8fafc !important;
}

html.dark header {
  background-color: rgba(17, 24, 39, 0.95) !important;
  border-bottom-color: rgba(71, 85, 105, 0.55) !important;
}

html.dark footer,
html.dark section.bg-surface-container-low {
  background-color: #0d1424 !important;
  border-color: rgba(71, 85, 105, 0.55) !important;
  color: #e2e8f0 !important;
}

html.dark .bg-surface-container-lowest {
  background-color: #111827 !important;
  border-color: rgba(71, 85, 105, 0.5);
}

html.dark .bg-surface-container-low {
  background-color: #172033 !important;
}

html.dark .bg-surface-container {
  background-color: #1e293b !important;
}

html.dark .bg-surface-container-high {
  background-color: #27354d !important;
}

html.dark .bg-surface-container-highest {
  background-color: #334155 !important;
}

/* Text Hierarchy in Dark Mode — high contrast */
html.dark .text-on-surface,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark strong,
html.dark .brand-wordmark {
  color: #f8fafc !important;
}

html.dark .text-on-surface-variant,
html.dark .text-outline,
html.dark p,
html.dark li,
html.dark label,
html.dark span.text-on-surface-variant {
  color: #cbd5e1 !important;
}

html.dark .text-primary,
html.dark .brand-wordmark .brand-accent {
  color: #34d399 !important;
}

html.dark .text-on-primary {
  color: #022c22 !important;
}

html.dark .text-on-primary-container {
  color: #ecfdf5 !important;
}

html.dark .text-secondary {
  color: #2dd4bf !important;
}

html.dark .text-tertiary {
  color: #a5b4fc !important;
}

/* Footer & nav links must stay readable */
html.dark footer a,
html.dark footer li,
html.dark footer p,
html.dark footer ul,
html.dark footer span:not(.brand-accent):not(.brand-wordmark):not(.text-primary) {
  color: #cbd5e1 !important;
}

html.dark footer a:hover,
html.dark footer li:hover,
html.dark footer li:hover a {
  color: #6ee7b7 !important;
}

html.dark footer h4 {
  color: #f8fafc !important;
}

html.dark footer .brand-wordmark {
  color: #f8fafc !important;
}

html.dark footer .brand-accent,
html.dark footer .text-primary {
  color: #34d399 !important;
}

/* Default nav links */
html.dark nav a {
  color: #cbd5e1 !important;
}

html.dark nav a:hover {
  color: #f8fafc !important;
}

/* Active / primary nav pills keep dark text on green */
html.dark nav a.bg-primary,
html.dark nav a.bg-primary-container,
html.dark nav a[aria-current="page"].bg-primary,
html.dark nav a[aria-current="page"].bg-primary-container,
html.dark a.bg-primary,
html.dark button.bg-primary {
  background-color: #10b981 !important;
  color: #022c22 !important;
}

html.dark nav a.bg-primary-container {
  background-color: #059669 !important;
  color: #ecfdf5 !important;
}

/* Borders in Dark Mode */
html.dark .border-outline-variant,
html.dark .border-outline-variant\/30,
html.dark .border-outline-variant\/20,
html.dark .border-outline-variant\/40,
html.dark .border-surface-container,
html.dark .border-surface-container-highest,
html.dark .divide-outline-variant\/20 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-outline-variant\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(71, 85, 105, 0.65) !important;
}

/* Form Inputs in Dark Mode */
html.dark input[type="number"],
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
  background-color: #172033 !important;
  color: #f8fafc !important;
  border-color: rgba(71, 85, 105, 0.7) !important;
  caret-color: #34d399;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  background-color: #111827 !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25) !important;
}

html.dark option {
  background-color: #111827;
  color: #f8fafc;
}

/* Buttons in Dark Mode */
html.dark button.bg-primary,
html.dark a.bg-primary {
  background-color: #10b981 !important;
  color: #022c22 !important;
  font-weight: 700 !important;
}

html.dark button.bg-primary:hover,
html.dark a.bg-primary:hover {
  background-color: #34d399 !important;
}

html.dark .bg-primary\/10,
html.dark .bg-primary\/5,
html.dark .bg-primary-container\/10 {
  background-color: rgba(16, 185, 129, 0.18) !important;
}

html.dark .bg-secondary-container {
  background-color: rgba(20, 184, 166, 0.22) !important;
  color: #5eead4 !important;
}

html.dark .text-on-secondary-container {
  color: #99f6e4 !important;
}

html.dark .bg-secondary\/10 {
  background-color: rgba(20, 184, 166, 0.18) !important;
}

html.dark .bg-tertiary\/10 {
  background-color: rgba(99, 102, 241, 0.18) !important;
}

html.dark .bg-error\/10 {
  background-color: rgba(248, 113, 113, 0.15) !important;
}

/* Cards / elevated surfaces */
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg {
  --tw-shadow-color: rgba(0, 0, 0, 0.45);
}

/* Gradients in Dark Mode */
html.dark .from-surface {
  --tw-gradient-from: #0b0f19 var(--tw-gradient-from-position) !important;
}

html.dark .via-surface-container-low\/60 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(23, 32, 51, 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html.dark .to-surface {
  --tw-gradient-to: #0b0f19 var(--tw-gradient-to-position) !important;
}

html.dark .from-surface-container-high\/40 {
  --tw-gradient-from: rgba(39, 53, 77, 0.4) var(--tw-gradient-from-position) !important;
}

html.dark .via-surface-container-lowest {
  --tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* Tables in Dark Mode */
html.dark table th {
  background-color: #172033 !important;
  color: #f8fafc !important;
}

html.dark table td {
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

html.dark tr.cat-table-row:hover {
  background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Material icons stay visible */
html.dark .material-symbols-outlined {
  color: inherit;
}

html.dark .text-error {
  color: #f87171 !important;
}

/* kg/lbs and cm/ft unit-toggle "|" separators were nearly invisible
   against dark surfaces (outline-variant is a border tone, too low
   contrast for text) */
html.dark .text-outline-variant {
  color: #64748b !important;
}

/* Hide Scrollbar */
::-webkit-scrollbar {
  display: none;
}


/* Self-hosted icon font (subset of the icons this site uses) */
@font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400 500; font-display: block; src: url(/assets/fonts/material-symbols.woff2) format('woff2'); }
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }