html[data-theme="light"],
:root {
  /* Teals/Greens */
  --teal-darkest: #0a2a2a;
  --teal-dark: #1a4a4a;
  --teal-medium-dark: #008080;
  --teal-medium: #009a9a;
  --teal-medium-light: #5fbfbf;
  --teal-light: #a8dadc;
  --teal-very-light: #f1faee;

  /* Blues */
  --blue-dark: #1d3557;
  --blue-medium: #457b9d;
  --blue-very-light: #f1faee;

  /* Reds/Pinks */
  --red-dark: #a41515;
  --red-medium: #e63946;
  --pink-medium: #f4a2a8;
  --pink-light: #ffe0e0;

  /* Yellows/Oranges */
  --orange-medium: #e76f51;
  --gold-medium: #f4a261;
  --yellow-medium: #f5dd5d;
  --yellow-light: #fffacd;
  --yellow-very-light: #ffffe0;

  /* Grays/Neutrals */
  --gray-black: #000000;
  --gray-dark: #4f4f4f;
  --gray-medium: #a9a9a9;
  --gray-light: #d3d3d3;
  --gray-very-light: #e8e8e8;
  --gray-off-white: #f8f8f8;
  --gray-white: #ffffff;

  --primary: var(--teal-medium-light);
  --secondary: var(--teal-medium-dark);
  --accent: var(--yellow-medium);
  --primary-fg: var(--gray-white);

  --body-fg: #333;
  --body-bg: var(--gray-white);
  --body-quiet-color: #666;
  --body-medium-color: #444;
  --body-loud-color: var(--gray-black);

  --header-color: var(--primary-fg);
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: var(--teal-light);
  --breadcrumbs-link-fg: var(--gray-white);
  --breadcrumbs-bg: var(--teal-dark);

  --link-fg: var(--blue-medium);
  --link-hover-color: var(--blue-dark);
  --link-selected-fg: var(--secondary);

  --hairline-color: var(--gray-very-light);
  --border-color: var(--gray-light);

  --error-fg: var(--red-dark);

  --message-success-bg: var(--teal-very-light);
  --message-warning-bg: var(--yellow-light);
  --message-error-bg: var(--pink-light);

  --darkened-bg: var(--gray-off-white);
  --selected-bg: var(--gray-very-light);
  --selected-row: var(--yellow-light);

  --button-fg: var(--gray-white);
  --button-bg: var(--secondary);
  --button-hover-bg: var(--teal-dark);
  --default-button-bg: var(--teal-dark);
  --default-button-hover-bg: var(--teal-darkest);
  --close-button-bg: var(--gray-medium);
  --close-button-hover-bg: var(--gray-dark);
  --delete-button-bg: var(--red-medium);
  --delete-button-hover-bg: var(--red-dark);

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);

  --font-family-primary:
    "Segoe UI",
    system-ui,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-family-monospace:
    ui-monospace,
    Menlo,
    Monaco,
    "Cascadia Mono",
    "Segoe UI Mono",
    "Roboto Mono",
    "Oxygen Mono",
    "Ubuntu Monospace",
    "Source Code Pro",
    "Fira Mono",
    "Droid Sans Mono",
    "Courier New",
    monospace,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

  color-scheme: light;
}

#content-main {
  display: flex;
  flex-direction: column;
}

.object-tools {
  margin-top: 0px;
  align-self: flex-end;
}

.object-tools li {
  height: fit-content;
}

.object-tools input.custom-action-button {
  display: block;
  float: left;
  padding: 6px 12px;
  color: var(--object-tools-fg);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 15px;
  margin: 0;
}

.inline-group {
  overflow: auto;
}

/* External documentation link (e.g. Notion) shown in admin list/detail views */
.docs-link {
  font-weight: 700;
  font-size: 1.1em;
  text-decoration: underline;
}

/* JSON formatted content */
.json-formatted {
  background: var(--selected-bg);
  color: var(--body-fg);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 4px;
  overflow-y: auto;
  font-size: 12px;
  font-family: var(--font-family-monospace);
  margin: 0;
  white-space: pre-wrap;
}