:root,
html[data-theme="light"] {
  --primary: #F6B73A;            /* Gold accent */
  --secondary: #a201ff;          /* Purple */
  --accent: #ffffff;             /* Light accent */

  --body-fg: #1f2937;            /* Neutral dark gray text */
  --body-bg: #ffffff;            /* White background */
  --body-quiet-color: #6b7280;   /* Muted gray (quiet text) */
  --body-medium-color: #374151;  /* Medium gray (secondary text) */
  --body-loud-color: #000000;    /* True black for loud text */

  --breadcrumbs-link-fg: var(--accent);
  --breadcrumbs-fg: var(--primary);
  --breadcrumbs-bg: var(--secondary);

  --link-fg: #a201ffd8;
  --link-hover-color: var(--secondary);
  --link-selected-fg: var(--secondary);

  --border-color: #e5e7eb;       /* Neutral light border */
  --hairline-color: #f3f4f6;     /* Hairline border */

  --selected-row: #a201ff22;     /* Purple @ ~13% opacity */

  --error-fg: #dc2626;           /* Red-600 */
  --message-success-bg: #10b981; /* Green-500 */
  --message-warning-bg: #f59e0b; /* Amber-500 */
  --message-error-bg: #ef4444;   /* Red-500 */

  --close-button-bg: #9ca3af;    /* Gray-400 */
  --close-button-hover-bg: #6b7280; /* Gray-500 */
  --default-button-bg: var(--primary);
  --default-button-hover-bg: #e0a82a; /* Slightly darker gold */
  --button-hover-bg: #9333ea;    /* Purple hover */

  font-family: Arial, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}


html[data-theme="dark"],
:root {
  --primary: #F6B73A;            /* Gold accent */
  --secondary: #a201ff;          /* Purple */
  --accent: #000;                /* Dark background accent */

  --body-fg: #f3f4f6;            /* Light text */
  --body-bg: #111;               /* Dark background */
  --body-quiet-color: #aaa;      /* Muted gray */
  --body-medium-color: #bbb;     /* Mid gray */
  --body-loud-color: #fff;       /* Strong white text */

  --breadcrumbs-link-fg: #f3f4f6;
  --breadcrumbs-fg: var(--primary);
  --breadcrumbs-bg: var(--secondary);

  --link-fg: #f3f4f6;
  --link-hover-color: var(--secondary);
  --link-selected-fg: var(--secondary);

  --border-color: #333;
  --hairline-color: #222;

  --selected-row: #a201ff55;     /* Purple @ ~33% opacity */

  --error-fg: #ff4d4d;
  --message-success-bg: #135e2c;
  --message-warning-bg: #7a2c40;
  --message-error-bg: #732121;

  --close-button-bg: #444;
  --close-button-hover-bg: #666;
  --default-button-bg: var(--primary);

  color-scheme: dark;
  font-family: Arial, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#site-name a {
    color: #fff !important;
}

.help *,
.tabular-help {
    color: #d67086 !important;
    font-weight: bold;
}

.tabular-help {
    padding-block: 1rem;
    padding-inline: 0.525rem;
    font-size: 0.725rem !important;
}