/* Shared source of truth for the Angular application and nginx landing pages. */
:root {
  color-scheme: light;

  /* Core WeHireIt palette */
  --whi-bg: #f3f6f8;
  --whi-surface: #ffffff;
  --whi-surface-soft: #e8f1f6;
  --whi-text: #142331;
  --whi-muted: #5d6b75;
  --whi-line: #d7e0e6;
  --whi-accent: #063b61;
  --whi-accent-deep: #052a44;
  --whi-accent-2: #f45a00;
  --whi-accent-2-deep: #d94b00;

  /* Semantic states share a small set of colors across the site. */
  --whi-success: #2e7d32;
  --whi-success-soft: #edf5e7;
  --whi-warning: var(--whi-accent-2);
  --whi-warning-soft: #fff0e5;
  --whi-danger: #b91c1c;
  --whi-danger-soft: #fef2f2;
  --whi-info: var(--whi-accent);
  --whi-info-soft: var(--whi-surface-soft);

  /* RGB channels let components keep opacity without inventing new colors. */
  --whi-white-rgb: 255, 255, 255;
  --whi-black-rgb: 0, 0, 0;
  --whi-text-rgb: 20, 35, 49;
  --whi-muted-rgb: 93, 107, 117;
  --whi-line-rgb: 215, 224, 230;
  --whi-accent-rgb: 6, 59, 97;
  --whi-accent-2-rgb: 244, 90, 0;
  --whi-success-rgb: 46, 125, 50;
  --whi-warning-rgb: 244, 90, 0;
  --whi-danger-rgb: 185, 28, 28;

  --whi-accent-glow: rgba(var(--whi-accent-rgb), 0.1);
  --whi-accent-2-glow: rgba(var(--whi-accent-2-rgb), 0.12);
  --whi-shadow: 0 10px 26px rgba(var(--whi-accent-rgb), 0.09);
  --whi-shadow-light: 0 4px 12px rgba(var(--whi-accent-rgb), 0.06);
  --whi-border-subtle: rgba(var(--whi-accent-rgb), 0.12);

  /* Bootstrap maps to the same brand and semantic values. */
  --bs-primary: var(--whi-accent);
  --bs-primary-rgb: 6, 59, 97;
  --bs-secondary: var(--whi-muted);
  --bs-secondary-rgb: 93, 107, 117;
  --bs-success: var(--whi-success);
  --bs-success-rgb: 46, 125, 50;
  --bs-warning: var(--whi-warning);
  --bs-warning-rgb: 244, 90, 0;
  --bs-danger: var(--whi-danger);
  --bs-danger-rgb: 185, 28, 28;
  --bs-info: var(--whi-info);
  --bs-info-rgb: 6, 59, 97;
  --bs-body-color: var(--whi-text);
  --bs-body-bg: var(--whi-bg);
  --bs-light: var(--whi-surface-soft);
  --bs-light-rgb: 232, 241, 246;
  --bs-border-color: var(--whi-line);
  --bs-link-color: var(--whi-accent);
  --bs-link-hover-color: var(--whi-accent-deep);
  --bs-btn-color: var(--whi-surface);
  --bs-btn-bg: var(--whi-accent-2);
  --bs-btn-border-color: var(--whi-accent-2);
  --bs-btn-hover-bg: var(--whi-accent-2-deep);
  --bs-btn-hover-border-color: var(--whi-accent-2-deep);
  --bs-btn-active-bg: var(--whi-accent-deep);
  --bs-btn-active-border-color: var(--whi-accent-deep);
  --bs-card-bg: var(--whi-surface);
  --bs-card-border-color: var(--whi-border-subtle);
  --bs-card-box-shadow: var(--whi-shadow);
  --bs-navbar-color: var(--whi-text);
  --bs-navbar-hover-color: var(--whi-accent);
  --bs-navbar-active-color: var(--whi-accent);
  --bs-dropdown-bg: var(--whi-surface);
  --bs-dropdown-border-color: var(--whi-line);

  /* Shared shape and typography tokens. */
  --whi-body-font: Inter, "Segoe UI", Arial, sans-serif;
  --whi-control-height: 32px;
  --whi-control-padding-x: 0.7rem;
  --whi-control-font-size: 0.875rem;
  --whi-radius-card: 6px;
  --whi-radius-block: 6px;
  --whi-radius-item: 4px;
  --whi-radius-pill: 999px;
}