:root,
html.light-linux {
  --link-bg-primary: var(--portal-bg, #fbf8f3);
  --link-bg-secondary: var(--portal-bg-subtle, #f5efe8);
  --link-bg-card: var(--portal-surface, #fffdfa);
  --link-bg-card-hover: var(--portal-surface-strong, #ffffff);
  --link-bg-input: var(--portal-surface-muted, #eee4db);
  --link-text-primary: var(--portal-ink, #242029);
  --link-text-secondary: var(--portal-ink-soft, #39343d);
  --link-border: var(--portal-line, #e7ddd6);
  --link-border-strong: var(--portal-line-strong, #d5c8bf);
  --link-accent: var(--portal-accent, #765aa6);

  --background: #fbf8f3;
  --foreground: #242029;
  --card: #fffdfa;
  --card-foreground: #242029;
  --popover: #fffdfa;
  --popover-foreground: #242029;
  --primary: #765aa6;
  --primary-foreground: #ffffff;
  --secondary: #f5efe8;
  --secondary-foreground: #242029;
  --muted: #eee4db;
  --muted-foreground: #6a626d;
  --accent: #f5efe8;
  --accent-foreground: #242029;
  --destructive: #b65443;
  --destructive-foreground: #ffffff;
  --border: #e7ddd6;
  --input: #eee4db;
  --ring: rgba(118, 90, 166, 0.44);
  --sidebar: #fffdfa;
  --sidebar-foreground: #242029;
  --sidebar-primary: #765aa6;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #eee4db;
  --sidebar-accent-foreground: #242029;
  --sidebar-border: #e7ddd6;
  --sidebar-ring: rgba(118, 90, 166, 0.44);
  --gradient-primary: linear-gradient(135deg, #765aa6 0%, #927eb8 100%);
  --gradient-amber: linear-gradient(135deg, #b87964 0%, #8f5e4b 100%);
}

html.dark,
.dark,
html.dark-linux,
:root[data-portal-theme="dark"] {
  --link-bg-primary: var(--portal-bg, #15101f);
  --link-bg-secondary: var(--portal-bg-subtle, #1f172b);
  --link-bg-card: var(--portal-surface, #2a2237);
  --link-bg-card-hover: var(--portal-surface-strong, #342a44);
  --link-bg-input: var(--portal-surface-muted, #201a2a);
  --link-text-primary: var(--portal-ink, #f4eee8);
  --link-text-secondary: var(--portal-ink-soft, #d8cde3);
  --link-border: var(--portal-line, rgba(214, 198, 224, 0.18));
  --link-border-strong: var(--portal-line-strong, rgba(214, 198, 224, 0.36));
  --link-accent: var(--portal-accent, #a88ac9);

  --background: #15101f;
  --foreground: #f4eee8;
  --card: #2a2237;
  --card-foreground: #f4eee8;
  --popover: #2a2237;
  --popover-foreground: #f4eee8;
  --primary: #a88ac9;
  --primary-foreground: #17111f;
  --secondary: #241d30;
  --secondary-foreground: #f4eee8;
  --muted: #201a2a;
  --muted-foreground: #b9adca;
  --accent: #302640;
  --accent-foreground: #f4eee8;
  --destructive: #e08a7d;
  --destructive-foreground: #1b0d0b;
  --border: rgba(214, 198, 224, 0.18);
  --input: rgba(214, 198, 224, 0.24);
  --ring: rgba(182, 163, 211, 0.52);
  --sidebar: #120d1b;
  --sidebar-foreground: #f4eee8;
  --sidebar-primary: #a88ac9;
  --sidebar-primary-foreground: #17111f;
  --sidebar-accent: #2a2237;
  --sidebar-accent-foreground: #f4eee8;
  --sidebar-border: rgba(214, 198, 224, 0.16);
  --sidebar-ring: rgba(182, 163, 211, 0.52);
  --gradient-primary: linear-gradient(135deg, #8f70b8 0%, #b59bd3 100%);
  --gradient-amber: linear-gradient(135deg, #b87964 0%, #d4a08d 100%);
}

html,
body {
  background:
    linear-gradient(180deg, var(--link-bg-secondary) 0%, var(--link-bg-primary) 48%, var(--link-bg-secondary) 100%) !important;
  color: var(--link-text-primary) !important;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* Habits progress ring center labels: handwritten/editorial look */
.text-\[10px\].font-bold.uppercase.tracking-\[0\.22em\].text-white\/70,
.font-serif.text-6xl.text-white,
.mt-1.text-xs.text-white\/70 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: normal;
  letter-spacing: 0 !important;
}

/* Keep the Pomodoro countdown legible on the dark timer surface. */
.text-6xl.font-bold.tabular-nums {
  color: var(--portal-pomodoro-timer-text, #f4eee8) !important;
  text-shadow: 0 1px 18px rgba(244, 238, 232, 0.12);
}

[class*="group/sidebar-wrapper"],
[data-sidebar="sidebar"] {
  background: color-mix(in srgb, var(--link-bg-primary) 94%, transparent) !important;
  border-color: var(--link-border) !important;
}

[data-sidebar="header"] .text-\[15px\],
[data-sidebar="header"] .text-\[10px\] {
  color: var(--link-text-primary) !important;
}

[data-sidebar="menu-button"] {
  border-radius: 8px !important;
}

[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-button"][data-active="true"] {
  background: color-mix(in srgb, var(--link-accent) 16%, transparent) !important;
}

header.sticky {
  background: color-mix(in srgb, var(--link-bg-primary) 82%, transparent) !important;
  border-color: var(--link-border) !important;
}

main,
[class*="min-h-screen"] {
  background: transparent !important;
}

[class*="glass"],
[class*="card-sheen"],
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  background: color-mix(in srgb, var(--link-bg-card) 94%, transparent) !important;
  border-color: var(--link-border) !important;
}

[role="dialog"] {
  background: var(--link-bg-card) !important;
  border-color: var(--link-border) !important;
  color: var(--link-text-primary) !important;
}

[role="dialog"] h2,
[role="dialog"] h3,
[role="dialog"] label,
[role="dialog"] span,
[role="dialog"] svg {
  color: var(--link-text-primary) !important;
  stroke: currentColor !important;
}

[role="dialog"] input,
[role="dialog"] select,
[role="dialog"] textarea {
  background: linear-gradient(
    180deg,
    var(--link-bg-input),
    color-mix(in srgb, var(--link-bg-input) 82%, #fff)
  ) !important;
  color: var(--link-text-primary) !important;
  -webkit-text-fill-color: var(--link-text-primary) !important;
}

[role="dialog"] input::selection,
[role="dialog"] textarea::selection {
  background: color-mix(in srgb, var(--link-accent) 26%, transparent) !important;
  color: var(--link-text-primary) !important;
}

.border-white\/5,
.border-white\/10,
.border-white\/15,
.border-white\/20 {
  border-color: var(--link-border) !important;
}

.bg-black,
.bg-black\/10,
.bg-black\/20,
.bg-black\/30 {
  background-color: var(--link-bg-card) !important;
}

.bg-black\/70 {
  background-color: color-mix(in srgb, var(--link-bg-primary) 60%, #000 40%) !important;
}

.bg-card,
.card,
.bg-white,
.bg-surface,
.bg-surface-strong,
.bg-surface-muted,
.bg-border,
.bg-secondary,
.bg-muted {
  color: var(--link-text-primary) !important;
}

.bg-card.text-card-foreground,
.rounded-md.border.border-border.bg-card {
  color: var(--card-foreground) !important;
  -webkit-text-fill-color: var(--card-foreground) !important;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
a[class*="button"],
a[class*="btn"],
button[class*="button"],
button[class*="btn"] {
  color: var(--link-text-primary) !important;
  border-color: var(--link-border) !important;
}

.bg-orange-500,
.bg-orange-500\/80,
.bg-orange-500\/15,
.bg-orange-500\/10 {
  background-color: var(--link-accent) !important;
  color: var(--primary-foreground) !important;
  -webkit-text-fill-color: var(--primary-foreground) !important;
}

.text-orange-200,
.text-orange-100,
.text-orange-400 {
  color: var(--link-accent) !important;
}

.border-orange-500\/30,
.border-orange-400\/30 {
  border-color: color-mix(in srgb, var(--link-accent) 36%, transparent) !important;
}

.bg-emerald-500\/10,
.bg-emerald-500\/20,
.border-emerald-400\/40,
.text-emerald-100 {
  background-color: color-mix(in srgb, var(--portal-rose, #b87964) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--portal-rose, #b87964) 36%, transparent) !important;
  color: var(--portal-rose, #b87964) !important;
}

.bg-red-500\/10,
.border-red-400\/40,
.text-red-200 {
  background-color: color-mix(in srgb, var(--portal-danger, #b65443) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--portal-danger, #b65443) 36%, transparent) !important;
  color: var(--portal-danger, #b65443) !important;
}

[class*="card-sheen"]:hover,
[class*="glass"]:hover {
  background: color-mix(in srgb, var(--link-bg-card-hover) 88%, transparent) !important;
}

.text-white,
.text-white\/85,
.text-white\/80,
.text-white\/70,
.text-white\/60 {
  color: var(--link-text-primary) !important;
}

.text-muted-foreground,
.text-white\/50,
.text-white\/40,
.text-white\/30 {
  color: var(--link-text-secondary) !important;
}

[class*="bg-gradient-primary"],
[class*="bg-gradient-amber"],
.shadow-glow,
.shadow-glow-strong {
  background-image: var(--gradient-primary) !important;
  box-shadow: 0 12px 28px rgba(118, 90, 166, 0.2) !important;
}

[class*="bg-gradient-primary"],
[class*="bg-gradient-amber"],
.text-primary-foreground {
  color: var(--primary-foreground) !important;
  -webkit-text-fill-color: var(--primary-foreground) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--link-text-secondary) !important;
  -webkit-text-fill-color: var(--link-text-secondary) !important;
  opacity: 0.82;
}

.text-gradient-amber {
  background-image: linear-gradient(135deg, #c98b75 0%, #b87964 48%, #8f5e4b 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.text-orange-500\/80 {
  color: rgba(117, 92, 142, 0.92) !important;
  text-shadow: 0 0 14px rgba(118, 90, 166, 0.12);
}

button,
input,
select,
textarea {
  border-color: var(--link-border) !important;
}

input,
select,
textarea {
  background: linear-gradient(
    180deg,
    var(--link-bg-input),
    color-mix(in srgb, var(--link-bg-input) 82%, #fff)
  ) !important;
  color: var(--link-text-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--link-border-strong) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link-accent) 14%, transparent) !important;
}