:root {
  /* Font families */
  --font-heading: Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;
  --font-accent: Georgia, "Times New Roman", serif;

  /* Text colors */
  --color-text-primary: #111;
  --color-text-secondary: #333;
  --color-text-muted: #555;
  --color-text-inverse: #fff;
  --color-text-placeholder: #4d4d4d;
  --color-text-danger: #f00;
  --color-text-danger-soft: #fca5a5;
  --color-text-brand: #c99a25;
  --color-text-brand-danger: #ff1010;
  --color-link: currentColor;
  --color-link-hover: currentColor;

  /* Heading 1 */
  --text-h1-size: 2.375rem;
  --text-h1-weight: 400;
  --text-h1-line-height: 1.3;
  --text-h1-letter-spacing: 0;
  --text-h1-color: var(--color-text-primary);

  /* Heading 2 */
  --text-h2-size: 1.5rem;
  --text-h2-weight: 600;
  --text-h2-line-height: 1.2;
  --text-h2-letter-spacing: 0;
  --text-h2-color: var(--color-text-primary);

  /* Heading 3 */
  --text-h3-size: 1.3125rem;
  --text-h3-weight: 400;
  --text-h3-line-height: 1.1;
  --text-h3-letter-spacing: 0;
  --text-h3-color: var(--color-text-primary);

  /* Heading 4 */
  --text-h4-size: 1.125rem;
  --text-h4-weight: 700;
  --text-h4-line-height: 1.15;
  --text-h4-letter-spacing: 0;
  --text-h4-color: var(--color-text-primary);

  /* Body */
  --text-body-size: 1rem;
  --text-body-weight: 400;
  --text-body-line-height: 1.65;
  --text-body-letter-spacing: 0;
  --text-body-color: var(--color-text-secondary);

  /* Small text */
  --text-small-size: 0.875rem;
  --text-small-weight: 400;
  --text-small-line-height: 1.35;
  --text-small-letter-spacing: 0;
  --text-small-color: var(--color-text-muted);
  --text-caption-size: 0.75rem;
  --text-caption-line-height: 1.25;

  /* Links */
  --text-link-color: var(--color-link);
  --text-link-hover-color: var(--color-link-hover);
  --text-link-decoration: none;
  --text-link-hover-decoration: underline;

  /* Buttons */
  --text-button-size: 0.875rem;
  --text-button-weight: 700;
  --text-button-line-height: 1;
  --text-button-letter-spacing: 0;
  --text-button-transform: none;

  /* Form labels */
  --text-label-size: 0.875rem;
  --text-label-weight: 400;
  --text-label-line-height: 1.25;
  --text-label-letter-spacing: 0;
  --text-label-color: var(--color-text-inverse);

  /* App interface */
  --text-app-title-size: 0.9375rem;
  --text-app-title-weight: var(--text-h4-weight);
  --text-app-title-line-height: var(--text-h4-line-height);
  --text-nav-size: 0.9375rem;
  --text-search-size: 0.8125rem;
  --text-menu-size: 0.8125rem;
  --text-user-name-size: 0.875rem;
  --text-user-title-size: 0.5625rem;

  /* Authentication */
  --text-auth-title-size: 1.0625rem;
  --text-auth-title-weight: 400;
  --text-auth-title-line-height: 1.15;
  --text-auth-help-size: 0.75rem;
  --text-auth-help-line-height: 1.35;
  --text-auth-description-line-height: 1.45;
  --text-compact-line-height: 1.05;
}

html,
body {
  color: var(--text-body-color);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  letter-spacing: var(--text-body-letter-spacing);
  line-height: var(--text-body-line-height);
}

button,
input {
  font: inherit;
}

h1 {
  color: var(--text-h1-color);
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-letter-spacing);
  line-height: var(--text-h1-line-height);
}

h2 {
  color: var(--text-h2-color);
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-letter-spacing);
  line-height: var(--text-h2-line-height);
}

h3 {
  color: var(--text-h3-color);
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  letter-spacing: var(--text-h3-letter-spacing);
  line-height: var(--text-h3-line-height);
}

h4 {
  color: var(--text-h4-color);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  letter-spacing: var(--text-h4-letter-spacing);
  line-height: var(--text-h4-line-height);
}

a {
  color: var(--text-link-color);
  text-decoration: var(--text-link-decoration);
}

a:hover,
a:focus-visible {
  color: var(--text-link-hover-color);
  text-decoration: var(--text-link-hover-decoration);
}

.auth-shell {
  color: var(--color-text-inverse);
}

.login-title {
  color: var(--color-text-brand);
  font-family: var(--font-accent);
  font-size: var(--text-auth-title-size);
  font-weight: var(--text-auth-title-weight);
  line-height: var(--text-auth-title-line-height);
}

.label {
  color: var(--text-label-color);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-letter-spacing);
  line-height: var(--text-label-line-height);
}

.input {
  color: var(--color-text-primary);
}

.primary,
.button {
  color: var(--color-text-inverse);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  letter-spacing: var(--text-button-letter-spacing);
  line-height: var(--text-button-line-height);
  text-transform: var(--text-button-transform);
}

.small {
  font-size: var(--text-body-size);
}

.muted {
  color: var(--color-text-inverse);
}

.auth-description {
  line-height: var(--text-auth-description-line-height);
  text-align: center;
}

.mfa-qr-container {
  text-align: center;
}

.mfa-manual-secret {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
  text-align: center;
}

.mfa-secret-code {
  font-size: var(--text-small-size);
  letter-spacing: var(--text-small-letter-spacing);
}

.error {
  color: var(--color-text-danger-soft);
  font-size: var(--text-small-size);
}

.auth-help {
  color: var(--color-text-inverse);
  font-size: var(--text-auth-help-size);
  line-height: var(--text-auth-help-line-height);
}

.auth-help-centered {
  text-align: center;
}

.back-link {
  color: var(--color-text-inverse);
  line-height: var(--text-button-line-height);
  text-decoration: var(--text-link-decoration);
  white-space: nowrap;
}

.crm-shell,
.tickets-page {
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

.crm-sr-only {
  white-space: nowrap;
}

.crm-shell-title {
  color: var(--color-text-primary);
  font-size: var(--text-app-title-size);
  font-weight: var(--text-app-title-weight);
  line-height: var(--text-app-title-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-search input {
  color: var(--color-text-secondary);
  font-size: var(--text-search-size);
}

.crm-search input::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

.crm-user-button {
  color: var(--color-text-primary);
}

.crm-user-copy {
  line-height: var(--text-compact-line-height);
}

.crm-user-name {
  font-size: var(--text-user-name-size);
}

.crm-user-title {
  color: var(--color-text-secondary);
  font-size: var(--text-user-title-size);
}

.crm-menu button {
  color: var(--color-text-muted);
  font-size: var(--text-menu-size);
  text-align: left;
  text-decoration: var(--text-link-decoration);
}

.crm-menu .crm-logout {
  color: var(--color-text-danger);
}

.crm-sidebar-brand,
.crm-sidebar-panel,
.crm-sidebar-link,
.crm-sidebar-link:hover,
.crm-sidebar-link:focus-visible {
  color: var(--color-text-inverse);
}

.crm-sidebar-brand,
.crm-sidebar-link {
  text-decoration: var(--text-link-decoration);
}

.crm-brand-copy {
  line-height: var(--text-button-line-height);
  white-space: nowrap;
}

.crm-brand-copy span {
  font-size: var(--text-small-size);
}

.crm-brand-copy strong {
  font-size: var(--text-app-title-size);
  font-weight: 400;
}

.crm-sidebar-link {
  font-size: var(--text-nav-size);
  text-align: left;
}

.crm-sidebar-link:hover .crm-sidebar-label,
.crm-sidebar-link:focus-visible .crm-sidebar-label {
  text-decoration: var(--text-link-hover-decoration);
}

.crm-shell[data-sidebar-state="collapsed"] .crm-sidebar-label {
  white-space: nowrap;
}

.tab {
  color: var(--color-text-muted);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: var(--text-button-line-height);
  text-decoration: var(--text-link-decoration);
}

.tab:hover,
.tab:focus-visible {
  text-decoration: none;
}

.tab-active {
  color: var(--color-text-inverse);
}

.column h2 {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
}

.title-card-meta {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-weight: var(--text-button-weight);
}

.title-card-meta strong,
.dialog-meta strong {
  color: var(--color-text-brand-danger);
}

.title-card h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
}

.title-card p {
  color: var(--color-text-primary);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
}

.dialog-meta {
  font-size: var(--text-small-size);
  font-weight: var(--text-button-weight);
}

.dialog-summary h2 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
}

.dialog-summary p {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
}

.marketing-section-title h2 {
  color: #003323;
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line-height);
}

.marketing-tile,
.marketing-channel-panel h2 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
}

.marketing-back-link {
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
}

.ticket-dialog-date {
  color: var(--color-text-muted);
  font-size: var(--text-h4-size);
}

.message {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line-height);
}

.message-meta {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line-height);
}