/*
 * All colors of the app (D-016): CoreUI CSS custom properties plus a few TTT tokens.
 * No Sass toolchain, no inline styles, no !important. Contrast is checked against WCAG AA.
 *
 * House style of zuidcore.nl (Story #276): teal #2f6d76 and charcoal #373b3e from the logo,
 * the warm off-white #efece9 page, Helvetica Neue. Dark mode uses the charcoal as its surface
 * and a lighter teal, so text and controls keep their contrast.
 */
:root,
[data-coreui-theme="light"] {
  --cui-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cui-body-bg: #efece9;
  --cui-body-bg-rgb: 239, 236, 233;
  --cui-body-color: #373b3e;            /* 9.6:1 on the page, 11.4:1 on cards */
  --cui-body-color-rgb: 55, 59, 62;
  --cui-emphasis-color: #26292b;
  --cui-emphasis-color-rgb: 38, 41, 43;
  --cui-secondary-color: rgba(55, 59, 62, 0.75); /* ≈ #6b6e70 on white: 5.1:1 */
  --cui-tertiary-bg: #e4e0dc;
  --cui-border-color: #d8d3ce;
  --cui-primary: #2f6d76;               /* white on teal 5.9:1; teal on the page 5.0:1 */
  --cui-primary-rgb: 47, 109, 118;
  --cui-link-color: #2f6d76;
  --cui-link-color-rgb: 47, 109, 118;
  --cui-link-hover-color: #24555c;
  --cui-link-hover-color-rgb: 36, 85, 92;
  --cui-focus-ring-color: rgba(47, 109, 118, 0.3);
  --ttt-surface: #ffffff;               /* cards and header stand out from the warm page */
  --ttt-focus-border: #7fa9af;
  --ttt-mark-x: #2f6d76;                /* 5.9:1 on a white cell */
  --ttt-mark-o: #373b3e;                /* 11.4:1 */
  --ttt-win-bg: #d5e8ea;                /* teal 4.6:1, charcoal 8.9:1 on it */
  --ttt-win-border: #2f6d76;
}

[data-coreui-theme="dark"] {
  --cui-body-bg: #2b2e31;
  --cui-body-bg-rgb: 43, 46, 49;
  --cui-body-color: #e7e4e0;            /* 11.9:1 on the page, 9.4:1 on cards */
  --cui-body-color-rgb: 231, 228, 224;
  --cui-emphasis-color: #ffffff;
  --cui-emphasis-color-rgb: 255, 255, 255;
  --cui-secondary-color: rgba(231, 228, 224, 0.7);
  --cui-tertiary-bg: #33373a;
  --cui-border-color: #4a4f53;
  --cui-primary: #6fb8c2;               /* 6.1:1 on the page, 5.0:1 on cards */
  --cui-primary-rgb: 111, 184, 194;
  --cui-link-color: #7cc3cc;
  --cui-link-color-rgb: 124, 195, 204;
  --cui-link-hover-color: #a3d6dc;
  --cui-link-hover-color-rgb: 163, 214, 220;
  --cui-focus-ring-color: rgba(111, 184, 194, 0.35);
  --ttt-surface: #373b3e;               /* the brand charcoal */
  --ttt-focus-border: #6fb8c2;
  --ttt-mark-x: #7cc3cc;                /* 5.5:1 on a charcoal cell */
  --ttt-mark-o: #e7e4e0;                /* 9.4:1 */
  /* CoreUI's --cui-success-bg-subtle stays light in dark mode, so the win highlight has its own tokens. */
  --ttt-win-bg: #1f4247;                /* teal 4.8:1, light grey 10:1 on it */
  --ttt-win-border: #6fb8c2;
}

/* Cards and the header sit on their own surface; CoreUI makes both the page color. */
.card,
.modal {
  --cui-card-bg: var(--ttt-surface);
  --cui-modal-bg: var(--ttt-surface);
}

.header {
  --cui-header-bg: var(--ttt-surface);
}

/* Fields take the card surface: on the warm page color they would look disabled on a card. */
.form-control,
.form-select {
  background-color: var(--ttt-surface);
}

/* Read-only fields (the invite link) keep a quieter fill. */
.form-control[readonly] {
  background-color: var(--cui-tertiary-bg);
}

/* CoreUI compiles focus colors at its build time; give inputs the teal focus. */
.form-control:focus,
.form-select:focus {
  background-color: var(--ttt-surface);
  border-color: var(--ttt-focus-border);
  box-shadow: 0 0 0 0.25rem var(--cui-focus-ring-color);
}

/*
 * CoreUI also compiles button colors, so --cui-primary does not reach buttons: set them here.
 * Light: white on teal (5.9:1). Dark: charcoal text on the lighter teal (7.2:1).
 */
:root .btn-primary,
[data-coreui-theme="light"] .btn-primary {
  --cui-btn-color: #ffffff;
  --cui-btn-bg: #2f6d76;
  --cui-btn-border-color: #2f6d76;
  --cui-btn-hover-color: #ffffff;
  --cui-btn-hover-bg: #275b63;
  --cui-btn-hover-border-color: #24555c;
  --cui-btn-focus-shadow-rgb: 47, 109, 118;
  --cui-btn-active-color: #ffffff;
  --cui-btn-active-bg: #24555c;
  --cui-btn-active-border-color: #214e54;
  --cui-btn-disabled-color: #ffffff;
  --cui-btn-disabled-bg: #2f6d76;
  --cui-btn-disabled-border-color: #2f6d76;
}

:root .btn-outline-primary,
[data-coreui-theme="light"] .btn-outline-primary {
  --cui-btn-color: #2f6d76;
  --cui-btn-border-color: #2f6d76;
  --cui-btn-hover-color: #ffffff;
  --cui-btn-hover-bg: #2f6d76;
  --cui-btn-hover-border-color: #2f6d76;
  --cui-btn-focus-shadow-rgb: 47, 109, 118;
  --cui-btn-active-color: #ffffff;
  --cui-btn-active-bg: #2f6d76;
  --cui-btn-active-border-color: #2f6d76;
  --cui-btn-disabled-color: #2f6d76;
  --cui-btn-disabled-border-color: #2f6d76;
}

[data-coreui-theme="dark"] .btn-primary {
  --cui-btn-color: #1e2124;
  --cui-btn-bg: #6fb8c2;
  --cui-btn-border-color: #6fb8c2;
  --cui-btn-hover-color: #1e2124;
  --cui-btn-hover-bg: #8cc8d0;
  --cui-btn-hover-border-color: #8cc8d0;
  --cui-btn-focus-shadow-rgb: 111, 184, 194;
  --cui-btn-active-color: #1e2124;
  --cui-btn-active-bg: #a3d6dc;
  --cui-btn-active-border-color: #a3d6dc;
  --cui-btn-disabled-color: #1e2124;
  --cui-btn-disabled-bg: #6fb8c2;
  --cui-btn-disabled-border-color: #6fb8c2;
}

[data-coreui-theme="dark"] .btn-outline-primary {
  --cui-btn-color: #7cc3cc;
  --cui-btn-border-color: #7cc3cc;
  --cui-btn-hover-color: #1e2124;
  --cui-btn-hover-bg: #7cc3cc;
  --cui-btn-hover-border-color: #7cc3cc;
  --cui-btn-focus-shadow-rgb: 111, 184, 194;
  --cui-btn-active-color: #1e2124;
  --cui-btn-active-bg: #7cc3cc;
  --cui-btn-active-border-color: #7cc3cc;
  --cui-btn-disabled-color: #7cc3cc;
  --cui-btn-disabled-border-color: #7cc3cc;
}