/*
 * Global Design Standards v2.1 base layer (CEO-approved 2026-10-22).
 * Loaded after main.css. Additive only: tokens, focus, press, motion and hit-area rules.
 */
:root {
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-2xl: 1.75rem;
  --text-display: 2.5rem;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --tap-min: 44px;
  --text-muted-aa: #475569; /* 7.6:1 on white */
}

/* Keyboard focus: one definition for every interactive element */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--brand-primary, #00bfa5);
  outline-offset: 2px;
}

/* Press feedback is primary (works on touch) */
button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:active,
.pwa-tab-item:active {
  transform: scale(.98);
}

/* Button Label Integrity & No-Wrap (v2.1 Standard 2) */
.btn,
button,
[role="button"],
.pwa-tab-item,
.pill-filter,
.nav-pills .nav-link,
.badge {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hit areas: 44x44px minimum for every interactive control (v2.1 Standard 3) */
.btn,
button:not(.btn-close),
.form-select,
.form-control,
.pwa-tab-item,
.nav-pills .nav-link {
  min-height: var(--tap-min);
}

.hit-target-44 {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* For dense views where visible size is compact, expand hit area */
.hit-area-expand {
  position: relative;
}
.hit-area-expand::after {
  content: '';
  position: absolute;
  inset: -8px;
}

/* 8px minimum gap between adjacent interactive elements (v2.1 Standard 3) */
.gap-interactive,
.btn-group-v21 {
  gap: var(--space-2);
}

/* Defensive text layouts: clamping without mid-word truncation (v2.1 Standard 2) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* WCAG AA text contrast: never use #94a3b8 on light backgrounds (v2.1 Standard 4) */
.text-muted,
.text-secondary,
.form-text {
  color: var(--text-muted-aa) !important;
}
body.dark-mode .text-muted,
body.dark-mode .text-secondary,
body.dark-mode .form-text {
  color: #94a3b8 !important;
}

/* Hover lift is a pointer-only enhancement, never on touch */
@media (hover: none) {
  .btn:hover,
  .btn-brand:hover,
  .btn-primary:hover,
  .btn-brand-outline:hover,
  .btn-outline-primary:hover,
  .btn-secondary:hover {
    transform: none;
  }
}

/* Reduced motion: honour the user's OS setting everywhere */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hit areas: expand to 44px without changing the visual size */
.pwa-tab-item {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}

/* AA contrast for light-mode secondary text (was #94a3b8, about 2.6:1) */
.notif-item-time {
  color: var(--text-muted-aa);
}
body.dark-mode .notif-item-time {
  color: #94a3b8;
}