/* Crystal Ready brand colors on the existing Tabler component system. */
:root {
  color-scheme: light;
  --brand-midnight: #061a3a;
  --brand-ocean: #0a2a66;
  --brand-electric: #127dff;
  --brand-cyan: #56e4ff;
  --brand-ice: #dff7ff;
  --brand-frost: #f8fbff;
  --brand-slate: #8ea6c6;
  --ui-canvas: var(--brand-frost);
  --ui-surface: #ffffff;
  --ui-sidebar: #edf5ff;
  --ui-subtle: #f0f6ff;
  --ui-hover: #e4f0ff;
  --ui-text: var(--brand-midnight);
  --ui-secondary: #365477;
  --ui-muted: #587294;
  --ui-border: #d5e3f4;
  --ui-control: #829dbe;
  --ui-accent: #0759c2;
  --ui-accent-bg: #e6f1ff;
  --ui-accent-border: #a7cafd;
  --ui-focus: var(--brand-electric);
  --ui-primary: #0c63db;
  --ui-primary-ink: #ffffff;
  --ui-primary-border: #0a58c5;
  --ui-primary-gradient: linear-gradient(115deg, #0d6de9, #0b5fd2);
  --ui-primary-hover: linear-gradient(115deg, #0a61d4, #094fb7);
  --ui-primary-active: #094fb7;
  --ui-success: #216d4d;
  --ui-success-bg: #eaf5ef;
  --ui-success-border: #b5d7c4;
  --ui-warning: #81531d;
  --ui-warning-bg: #fff5e5;
  --ui-warning-border: #ddc6a2;
  --ui-error: #aa363d;
  --ui-error-bg: #fff0ef;
  --ui-error-border: #dfadb0;
  --ui-info: #215e91;
  --ui-info-bg: #eaf5ff;
  --ui-info-border: #b8d8f3;
  --ui-danger: #a1373f;
  --ui-danger-hover: #842b34;
  --ui-on-solid: #ffffff;
  --ui-backdrop: #071b3b66;
  --ui-shadow: #0c2e661a;
  --ui-highlight: #ffffff40;
  --ui-code-bg: var(--brand-midnight);
  --ui-code-text: #e0f3ff;
  --ui-chart-primary: var(--brand-electric);
  --ui-chart-secondary: var(--brand-slate);
  --ui-glow: #56e4ff24;
  --ui-art-gradient: radial-gradient(ellipse at 15% 0%, var(--brand-ice), transparent 65%), linear-gradient(135deg, var(--brand-frost), #b9eaff);
  --ui-selected-gradient: linear-gradient(105deg, #d9ebff, var(--brand-ice));
  --brand-logo-url: url("/assets/brand/crystalready-logo-light.png");

  --vh-color-page: var(--ui-canvas);
  --vh-color-surface: var(--ui-surface);
  --vh-color-surface-subtle: var(--ui-subtle);
  --vh-color-text-primary: var(--ui-text);
  --vh-color-text-secondary: var(--ui-secondary);
  --vh-color-primary: var(--ui-primary);
  --vh-color-primary-hover: var(--ui-primary-active);
  --vh-color-on-primary: var(--ui-primary-ink);
  --vh-color-nav-selected-bg: var(--ui-accent-bg);
  --vh-color-nav-selected-fg: var(--ui-accent);
  --vh-color-border-decorative: var(--ui-border);
  --vh-color-border-control: var(--ui-control);
  --vh-color-focus: var(--ui-focus);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: var(--brand-midnight);
  --ui-surface: #0b244a;
  --ui-sidebar: #092044;
  --ui-subtle: #12305a;
  --ui-hover: #1a3e6d;
  --ui-text: var(--brand-frost);
  --ui-secondary: #c4d7ef;
  --ui-muted: #a6bedb;
  --ui-border: #2c4f78;
  --ui-control: #7898bc;
  --ui-accent: #8bc2ff;
  --ui-accent-bg: #153c6e;
  --ui-accent-border: #3d75b1;
  --ui-focus: var(--brand-cyan);
  --ui-success: #8bd3ab;
  --ui-success-bg: #16382e;
  --ui-success-border: #32604b;
  --ui-warning: #e8c58e;
  --ui-warning-bg: #382e20;
  --ui-warning-border: #665336;
  --ui-error: #f4a6ac;
  --ui-error-bg: #3b242d;
  --ui-error-border: #794752;
  --ui-info: #a9d8f7;
  --ui-info-bg: #173653;
  --ui-info-border: #3d719b;
  --ui-backdrop: #020918b8;
  --ui-shadow: #00081570;
  --ui-highlight: #c5ecff1c;
  --ui-code-bg: #04132c;
  --ui-code-text: #d0edff;
  --ui-chart-primary: #5ba8ff;
  --ui-chart-secondary: var(--brand-slate);
  --ui-glow: #56e4ff1b;
  --ui-art-gradient: radial-gradient(ellipse at 15% 0%, #1d5b8f, transparent 65%), linear-gradient(135deg, var(--brand-ocean), #12335e);
  --ui-selected-gradient: linear-gradient(105deg, #174579, #16426e);
  --brand-logo-url: url("/assets/brand/crystalready-logo-dark.png");
}

html,
body {
  background-color: var(--ui-canvas);
  color: var(--ui-text);
}
::selection {
  background: var(--ui-accent-bg);
  color: var(--ui-accent);
}
input,
select,
textarea {
  accent-color: var(--ui-accent);
  caret-color: var(--ui-accent);
}
input::placeholder,
textarea::placeholder {
  color: var(--ui-muted);
  opacity: 1;
}
input:focus,
select:focus,
textarea:focus,
.applicant-app .field :is(input, select, textarea):focus,
.review-action-choice[aria-pressed="true"],
.choices .choice:has(:checked) {
  border-color: var(--ui-focus);
}
dialog {
  background: var(--ui-surface);
  color: var(--ui-text);
}
.applicant-app .primary {
  background: var(--ui-primary);
  border: 1px solid var(--ui-primary-border);
  color: var(--ui-primary-ink);
  font-weight: 650;
  box-shadow: none;
}
.applicant-app .primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-border);
  box-shadow: none;
}
.applicant-app .primary:not(:disabled):active {
  background: var(--ui-primary-active);
  box-shadow: none;
}
.brand-mark {
  color: var(--ui-accent);
}
.brand-mark.brand-mark--crystalready {
  display: inline-flex;
  width: 45px;
  height: 45px;
  margin: 0;
  flex: 0 0 45px;
  align-items: center;
  justify-content: center;
}
.brand-mark--crystalready img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px var(--ui-glow));
}
.brand-wordmark {
  color: var(--ui-text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.applicant-app .masthead .brand-wordmark {
  font-size: clamp(16px, 3.8vw, 23px);
  letter-spacing: .02em;
}
.brand-lockup {
  display: block;
  width: 170px;
  height: 170px;
  background: var(--brand-logo-url) center / contain no-repeat;
}
.connect-dialog .brand-lockup {
  margin-inline: auto;
}
.applicant-app .identity-art.identity-art--brand {
  display: grid;
  width: 100%;
  max-width: 100%;
  height: 170px;
  margin: 0 0 26px;
  place-items: center start;
}
.applicant-app .identity-art--brand > .brand-lockup {
  width: 170px;
  height: 170px;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  background: var(--brand-logo-url) center / contain no-repeat;
}
.applicant-app .footer-mark img {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.masthead-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.applicant-app .theme-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-surface);
  color: var(--ui-secondary);
  cursor: pointer;
}
.applicant-app .theme-toggle:hover {
  color: var(--ui-accent);
  background: var(--ui-accent-bg);
  border-color: var(--ui-accent-border);
}
.applicant-app .theme-toggle .lucide {
  width: 18px;
  height: 18px;
}
.applicant-app {
  background: var(--ui-canvas);
}
.applicant-app .masthead {
  background: var(--ui-canvas);
}
.identity-art > span {
  background: var(--ui-art-gradient);
  border-color: var(--ui-accent-border);
  color: var(--ui-accent);
  box-shadow: inset 0 1px 0 var(--ui-highlight), 0 10px 32px var(--ui-glow);
}
.complete-icon {
  background: var(--ui-selected-gradient);
  border-color: var(--ui-accent-border);
  color: var(--ui-accent);
}
.applicant-app .theme-toggle {
  width: 44px;
  height: 44px;
}
.applicant-app .field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--ui-error);
}
@media (max-width: 760px) {
  .applicant-app .theme-toggle {
    width: 40px;
    height: 40px;
  }
  .applicant-app .identity-art.identity-art--brand {
    height: 148px;
  }
  .applicant-app .identity-art--brand > .brand-lockup {
    width: 148px;
    height: 148px;
  }
}