:root {
  color-scheme: light;
  --wf-font-sans: "Avenir Next", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wf-font-display: "Avenir Next", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wf-color-primary: #2f80ed;
  --wf-color-primary-hover: #1769d8;
  --wf-color-primary-pressed: #0f56bd;
  --wf-color-primary-soft: #e8f2ff;
  --wf-color-success: #12a984;
  --wf-color-success-soft: #e1f7ef;
  --wf-color-warning: #f2a93b;
  --wf-color-warning-soft: #fff4dc;
  --wf-color-error: #d65353;
  --wf-color-error-soft: #fff0f0;
  --wf-color-background: #eef5fb;
  --wf-color-background-soft: #f5f8fc;
  --wf-color-surface: #ffffff;
  --wf-color-surface-raised: rgba(255, 255, 255, 0.94);
  --wf-color-surface-soft: #f7fbff;
  --wf-color-border: #dbe7f2;
  --wf-color-border-strong: #c7d7e8;
  --wf-color-text-primary: #172338;
  --wf-color-text-secondary: #687d94;
  --wf-color-text-muted: #8aa0b7;
  --wf-color-disabled: #aab7c5;

  --wf-gradient-brand: linear-gradient(145deg, #2f80ed 0%, #49a8ff 100%);
  --wf-gradient-brand-active: linear-gradient(180deg, #2f80ed 0%, #1d66c9 100%);
  --wf-gradient-app: linear-gradient(180deg, #f4f7fb 0%, #eef5fb 100%);
  --wf-gradient-card: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);

  --wf-space-1: 4px;
  --wf-space-2: 8px;
  --wf-space-3: 12px;
  --wf-space-4: 16px;
  --wf-space-5: 20px;
  --wf-space-6: 24px;
  --wf-space-7: 28px;
  --wf-space-8: 32px;
  --wf-space-10: 40px;

  --wf-radius-xs: 8px;
  --wf-radius-sm: 12px;
  --wf-radius-md: 16px;
  --wf-radius-lg: 20px;
  --wf-radius-xl: 24px;
  --wf-radius-2xl: 28px;
  --wf-radius-pill: 999px;

  --wf-shadow-soft: 0 14px 34px rgba(26, 62, 103, 0.06);
  --wf-shadow-card: 0 24px 70px rgba(26, 62, 103, 0.12);
  --wf-shadow-button: 0 16px 28px rgba(47, 128, 237, 0.18);
  --wf-shadow-focus: 0 0 0 4px rgba(47, 128, 237, 0.14);

  --wf-type-page-title: clamp(2rem, 3vw, 2.7rem);
  --wf-type-section-title: clamp(1.45rem, 2vw, 2rem);
  --wf-type-card-title: 1.08rem;
  --wf-type-body: 1rem;
  --wf-type-helper: 0.86rem;
  --wf-type-label: 0.74rem;
  --wf-type-button: 0.96rem;

  --wf-line-tight: 1.08;
  --wf-line-heading: 1.16;
  --wf-line-body: 1.55;

  --wf-control-height-sm: 40px;
  --wf-control-height-md: 48px;
  --wf-control-height-lg: 56px;
  --wf-control-height-clock: 76px;
  --wf-control-height-kiosk: 64px;
}

* {
  box-sizing: border-box;
}

body,
button,
input,
select,
textarea {
  font-family: var(--wf-font-sans);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

.wf-app-icon,
.brand-icon,
.brand-dot,
.brand-mark {
  display: grid;
  place-items: center;
  background: var(--wf-gradient-brand);
  color: #fff;
  font-weight: 900;
  text-transform: lowercase;
  box-shadow: 0 14px 28px rgba(47, 128, 237, 0.2);
}

.wf-wordmark {
  color: var(--wf-color-primary);
  font-family: var(--wf-font-display);
  font-weight: 900;
  letter-spacing: 0;
}

.wf-card,
.connect-panel,
.card,
.primary-panel,
.detail-panel,
.role-panel,
.staff-selection-panel,
.clock-card,
.side-card {
  border: 1px solid var(--wf-color-border);
  background: var(--wf-color-surface-raised);
  box-shadow: var(--wf-shadow-soft);
}

.wf-button,
.primary-action,
.secondary-action,
.outline-action,
.ghost-action,
.danger-action {
  min-height: var(--wf-control-height-md);
  border-radius: var(--wf-radius-md);
  font-size: var(--wf-type-button);
  font-weight: 850;
  touch-action: manipulation;
}

.wf-button-primary,
.primary-action {
  color: #fff;
  background: var(--wf-gradient-brand-active);
  box-shadow: var(--wf-shadow-button);
}

.wf-button-primary:hover,
.primary-action:hover {
  background: linear-gradient(180deg, var(--wf-color-primary-hover) 0%, var(--wf-color-primary-pressed) 100%);
}

.wf-button-secondary,
.secondary-action {
  color: var(--wf-color-text-primary);
  background: var(--wf-color-surface);
  border: 1px solid var(--wf-color-border);
}

.wf-button-outline,
.outline-action {
  color: var(--wf-color-primary-hover);
  background: transparent;
  border: 1px solid rgba(47, 128, 237, 0.46);
}

.wf-button-ghost,
.ghost-action {
  color: var(--wf-color-primary-hover);
  background: transparent;
  border: 1px solid transparent;
}

.wf-button-danger,
.danger-action {
  color: #fff;
  background: var(--wf-color-error);
}

.wf-clock-action,
.clock-primary {
  min-height: var(--wf-control-height-clock);
  border-radius: var(--wf-radius-sm);
  font-size: clamp(1.28rem, 4vw, 1.55rem);
}

.wf-kiosk-action,
.clock-actions .primary-action,
.clock-actions .secondary-action {
  min-height: var(--wf-control-height-kiosk);
}

button:disabled,
.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.wf-input,
.mobile-auth-form input,
.mobile-auth-form select,
.mobile-auth-form textarea,
.setup-form input,
.setup-form select,
.code-input,
.demo-role-select,
select {
  border: 1px solid var(--wf-color-border);
  background: var(--wf-color-surface);
  color: var(--wf-color-text-primary);
}

.wf-input:focus,
.mobile-auth-form input:focus,
.mobile-auth-form select:focus,
.mobile-auth-form textarea:focus,
.setup-form input:focus,
.setup-form select:focus,
.code-input:focus,
.demo-role-select:focus,
select:focus {
  border-color: rgba(47, 128, 237, 0.68);
  box-shadow: var(--wf-shadow-focus);
  outline: none;
}

.wf-label,
.eyebrow,
.nav-section p,
.setup-form label span,
.code-zone span {
  color: var(--wf-color-text-muted);
  font-size: var(--wf-type-label);
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wf-badge,
.pill,
.mini-stat,
.status-chip,
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--wf-radius-pill);
  font-size: 0.76rem;
  font-weight: 850;
}

.wf-badge-active,
.wf-badge-success,
.verified-badge {
  background: var(--wf-color-success-soft);
  color: #11684d;
}

.wf-badge-pending,
.wf-badge-warning {
  background: var(--wf-color-warning-soft);
  color: #925f00;
}

.wf-badge-error,
.wf-badge-danger {
  background: var(--wf-color-error-soft);
  color: var(--wf-color-error);
}

.wf-badge-info,
.pill,
.mini-stat.neutral,
.status-chip {
  background: var(--wf-color-primary-soft);
  color: var(--wf-color-primary-hover);
}

.wf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wf-color-surface);
}

.wf-table th {
  color: var(--wf-color-text-muted);
  font-size: var(--wf-type-label);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.wf-table th,
.wf-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--wf-color-border);
}

.wf-state-card,
.empty,
.alert-card {
  border: 1px dashed var(--wf-color-border);
  border-radius: var(--wf-radius-lg);
  background: rgba(255, 255, 255, 0.74);
  color: var(--wf-color-text-secondary);
}

.wf-state-card.is-success,
.result-panel:not(.is-error) {
  border-color: rgba(18, 169, 132, 0.28);
  background: var(--wf-color-success-soft);
  color: #11684d;
}

.wf-state-card.is-warning {
  border-color: rgba(242, 169, 59, 0.34);
  background: var(--wf-color-warning-soft);
  color: #925f00;
}

.wf-state-card.is-error,
.result-panel.is-error,
.auth-error {
  color: var(--wf-color-error);
}