/* Locked mobile staff/applicant/shared-app palette.
 * Use the same core families as desktop:
 * purple #8155FF
 * blue   #18BFFF
 * green  #3FD97F
 * orange #FF9C55
 * plus shared white/grey neutrals.
 *
 * This file is the mobile token override layer. It intentionally remaps the
 * older staff-app token names so the existing mobile auth/dashboard CSS can
 * move toward the same palette without a full rewrite in one step.
 */
.portal-shell.staff-theme,
.portal-shell.app-auth-body,
.portal-shell.applicant-theme {
  --mobile-page: #f8f9fc;
  --mobile-surface: #ffffff;
  --mobile-surface-soft: #f3f5f9;
  --mobile-border: #e4e8ef;
  --mobile-border-strong: #d7dee8;
  --mobile-text: #151a2d;
  --mobile-muted: #5b6579;
  --mobile-navy: #202642;
  --mobile-primary: #8155ff;
  --mobile-primary-hover: #6f43f3;
  --mobile-primary-soft: #f3edff;
  --mobile-primary-ink: #6b45e8;
  --mobile-blue: #18bfff;
  --mobile-blue-soft: #e7f9ff;
  --mobile-blue-ink: #1093c7;
  --mobile-green: #3fd97f;
  --mobile-green-soft: #ecfcf3;
  --mobile-green-ink: color-mix(in srgb, var(--mobile-green) 72%, var(--mobile-text) 28%);
  --mobile-orange: #ff9c55;
  --mobile-orange-soft: #fff2e8;
  --mobile-orange-ink: color-mix(in srgb, var(--mobile-orange) 76%, var(--mobile-text) 24%);
  --mobile-danger: color-mix(in srgb, var(--mobile-orange) 70%, var(--mobile-text) 30%);
  --mobile-danger-soft: #fff4ef;
  --mobile-auth-shell-gradient:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--mobile-blue) 18%, transparent) 0 22%, transparent 23%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--mobile-primary) 14%, transparent) 0 20%, transparent 21%),
    linear-gradient(
      180deg,
      var(--mobile-navy) 0%,
      color-mix(in srgb, var(--mobile-primary) 22%, var(--mobile-navy) 78%) 18%,
      var(--mobile-page) 18%,
      #ffffff 100%
    );
  --mobile-shell-dark: var(--mobile-navy);
  --mobile-topbar-gradient: var(--mobile-shell-dark);
  --mobile-topbar-border: color-mix(in srgb, white 12%, var(--mobile-shell-dark) 88%);
  --mobile-topbar-ink: #ffffff;
  --mobile-topbar-muted: color-mix(in srgb, white 78%, var(--mobile-shell-dark) 22%);
  --mobile-topbar-surface: color-mix(in srgb, white 12%, transparent);
  --mobile-bottom-nav-bg: var(--mobile-shell-dark);
  --mobile-card-topline: 2px;
  --mobile-card-accent: var(--mobile-blue);
  --mobile-card-accent-warm: var(--mobile-orange);
  --mobile-card-accent-primary: var(--mobile-primary);
  --mobile-card-fill: var(--mobile-surface);
  --mobile-card-fill-muted: color-mix(in srgb, var(--mobile-surface-soft) 45%, white 55%);

  /* Legacy mobile token remap */
  --staff-bg: var(--mobile-page);
  --staff-bg-soft: var(--mobile-page);
  --staff-shell: var(--mobile-surface);
  --staff-surface: rgba(255, 255, 255, 0.98);
  --staff-surface-raised: var(--mobile-surface);
  --staff-surface-soft: var(--mobile-surface-soft);
  --staff-line: color-mix(in srgb, var(--mobile-border) 78%, white 22%);
  --staff-line-strong: color-mix(in srgb, var(--mobile-border-strong) 82%, white 18%);
  --staff-border: var(--mobile-border);
  --staff-text: var(--mobile-text);
  --staff-muted: var(--mobile-muted);
  --staff-navy: var(--mobile-navy);
  --staff-primary: var(--mobile-primary);
  --staff-primary-deep: var(--mobile-primary-hover);
  --staff-blue: var(--mobile-blue);
  --staff-blue-soft: var(--mobile-blue-soft);
  --staff-accent-ink: var(--mobile-blue-ink);
  --staff-azure: var(--mobile-blue);
  --staff-azure-soft: var(--mobile-blue-soft);
  --staff-azure-ink: var(--mobile-blue-ink);
  --staff-button-primary-bg: var(--mobile-primary);
  --staff-button-primary-bg-hover: var(--mobile-primary-hover);
  --staff-button-primary-border: var(--mobile-primary-hover);
  --staff-button-primary-ink: #ffffff;
  --staff-button-secondary-bg: var(--mobile-surface);
  --staff-button-secondary-bg-hover: #f7f9fc;
  --staff-button-secondary-border: #d2d9e4;
  --staff-button-secondary-border-hover: #bcc6d5;
  --staff-button-secondary-ink: var(--mobile-text);
  --staff-orange: var(--mobile-orange);
  --staff-orange-soft: var(--mobile-orange-soft);
  --staff-success: var(--mobile-green-ink);
  --staff-success-soft: var(--mobile-green-soft);
  --staff-warning: var(--mobile-orange-ink);
  --staff-warning-soft: var(--mobile-orange-soft);
  --staff-danger: var(--mobile-danger);
  --staff-danger-soft: var(--mobile-danger-soft);
  --staff-red: var(--mobile-danger);
  --staff-red-soft: var(--mobile-danger-soft);
  --staff-purple: var(--mobile-primary);
  --staff-shadow: none;
  --staff-card-shadow: none;
  --staff-card-shadow-soft: none;
  --staff-shell-gradient: linear-gradient(180deg, #ffffff 0%, var(--mobile-page) 100%);
  --staff-topbar-gradient: var(--mobile-topbar-gradient);
  --staff-bottom-nav-bg: var(--mobile-bottom-nav-bg);

  /* Mobile UI aliases */
  --ui-font: "Segoe UI Variable Text", "Segoe UI", "Aptos", "Trebuchet MS", sans-serif;
  --ui-bg: var(--mobile-page);
  --ui-surface: var(--mobile-surface);
  --ui-surface-muted: var(--mobile-surface-soft);
  --ui-border: var(--mobile-border);
  --ui-border-strong: var(--mobile-border-strong);
  --ui-text: var(--mobile-text);
  --ui-text-muted: var(--mobile-muted);
  --ui-primary: var(--mobile-primary);
  --ui-primary-hover: var(--mobile-primary-hover);
  --ui-primary-soft: var(--mobile-primary-soft);
  --ui-primary-ink: var(--mobile-primary-ink);
  --ui-accent: var(--mobile-blue);
  --ui-accent-soft: var(--mobile-blue-soft);
  --ui-accent-ink: var(--mobile-blue-ink);
  --ui-success: var(--mobile-green);
  --ui-success-bg: var(--mobile-green-soft);
  --ui-warning: var(--mobile-orange);
  --ui-warning-bg: var(--mobile-orange-soft);
  --ui-danger: var(--mobile-danger);
  --ui-danger-bg: var(--mobile-danger-soft);
  --ui-btn-primary-bg: var(--staff-button-primary-bg);
  --ui-btn-primary-bg-hover: var(--staff-button-primary-bg-hover);
  --ui-btn-primary-border: var(--staff-button-primary-border);
  --ui-btn-primary-ink: var(--staff-button-primary-ink);
  --ui-btn-secondary-bg: var(--staff-button-secondary-bg);
  --ui-btn-secondary-bg-hover: var(--staff-button-secondary-bg-hover);
  --ui-btn-secondary-border: var(--staff-button-secondary-border);
  --ui-btn-secondary-border-hover: var(--staff-button-secondary-border-hover);
  --ui-btn-secondary-ink: var(--staff-button-secondary-ink);
  --ui-radius-control: 18px;
  --ui-radius-panel: 18px;
  --ui-radius-panel-muted: 16px;
  --ui-height-control: 44px;
  --ui-space-1: 6px;
  --ui-space-2: 12px;
  --ui-space-3: 16px;
  --ui-space-4: 20px;
  --ui-size-display: 2.25rem;
  --ui-size-title: 1.8rem;
  --ui-size-section: 1.14rem;
  --ui-size-body: 1.02rem;
  --ui-size-small: 0.86rem;
  --ui-line-display: 1.06;
  --ui-line-title: 1.08;
  --ui-line-section: 1.3;
  --ui-line-body: 1.52;
  --ui-line-small: 1.4;
  --ui-line-label: 1.35;
  --ui-line-meta: 1.35;
}

.portal-shell.staff-theme,
.portal-shell.staff-theme :where(input, select, textarea, button),
.portal-shell.app-auth-body,
.portal-shell.app-auth-body :where(input, select, textarea, button),
.portal-shell.applicant-theme,
.portal-shell.applicant-theme :where(input, select, textarea, button) {
  font-family: var(--ui-font);
}