/* TrustSniffer canonical web tokens. Product semantics are portable; component CSS remains web-only. */
:root {
  color-scheme: dark;

  --ts-color-background: #000000;
  --ts-color-surface: #0a0a0c;
  --ts-color-surface-elevated: #101014;
  --ts-color-surface-subtle: #0f172a;
  --ts-color-border: rgba(255, 255, 255, 0.08);
  --ts-color-border-strong: rgba(255, 255, 255, 0.16);
  --ts-color-text-primary: #f8fafc;
  --ts-color-text-secondary: #cbd5e1;
  --ts-color-text-muted: #94a3b8;
  --ts-color-accent: #0ea5e9;
  --ts-color-accent-strong: #38bdf8;
  --ts-color-on-accent: #ffffff;

  /* Approved TrustSniffer cool-steel website trust ladder. Never use these
     colors without a label and icon/shape. */
  --ts-state-trust: #0ea5e9;
  --ts-state-moderate-trust: #7dd3fc;
  --ts-state-low-trust: #64748b;
  --ts-state-critical-risk: #f43f5e;
  --ts-state-caution: #f59e0b;
  --ts-state-warning: #f59e0b;
  --ts-state-high-risk: #fb7185;
  --ts-state-danger: #f43f5e;
  --ts-state-unknown: #94a3b8;
  --ts-state-incomplete: #94a3b8;
  --ts-state-processing: #38bdf8;
  --ts-state-information: #7dd3fc;
  --ts-state-error: #fb7185;

  --ts-font-sans: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ts-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ts-font-display: clamp(2rem, 5vw, 4.5rem);
  --ts-font-heading: clamp(1.5rem, 3vw, 2.5rem);
  --ts-font-title: 1.25rem;
  --ts-font-body: 1rem;
  --ts-font-body-small: 0.875rem;
  --ts-font-label: 0.8125rem;
  --ts-font-caption: 0.75rem;
  --ts-line-tight: 1.2;
  --ts-line-body: 1.6;

  --ts-space-1: 0.25rem;
  --ts-space-2: 0.5rem;
  --ts-space-3: 0.75rem;
  --ts-space-4: 1rem;
  --ts-space-5: 1.25rem;
  --ts-space-6: 1.5rem;
  --ts-space-8: 2rem;
  --ts-space-10: 2.5rem;
  --ts-space-12: 3rem;
  --ts-space-16: 4rem;

  --ts-radius-sm: 0.5rem;
  --ts-radius-md: 0.75rem;
  --ts-radius-lg: 1rem;
  --ts-radius-xl: 1.5rem;
  --ts-radius-pill: 999px;
  --ts-border-width: 1px;
  --ts-shadow-raised: 0 18px 40px rgba(0, 0, 0, 0.42);
  --ts-shadow-overlay: 0 24px 70px rgba(0, 0, 0, 0.62);
  --ts-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.42);
  --ts-touch-target: 44px;
  --ts-motion-fast: 120ms;
  --ts-motion-standard: 180ms;
  --ts-ease-standard: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ts-color-accent-strong);
  outline-offset: 3px;
  box-shadow: var(--ts-focus-ring);
}

:where(button, [role='button'], input, select, textarea) { touch-action: manipulation; }
:where(button, .btn, .btn-main, .btn-soft, .icon-button) { min-block-size: var(--ts-touch-target); }

.ts-state {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-block-size: 1.75rem;
  border: var(--ts-border-width) solid currentColor;
  border-radius: var(--ts-radius-pill);
  padding: var(--ts-space-1) var(--ts-space-3);
  font-size: var(--ts-font-caption);
  font-weight: 700;
  line-height: 1.25;
}
.ts-state[data-semantic='HIGH_TRUST'] { color: var(--ts-state-trust); }
.ts-state[data-semantic='MEDIUM_TRUST'] { color: var(--ts-state-moderate-trust); }
.ts-state[data-semantic='LOW_TRUST'] { color: var(--ts-state-low-trust); }
.ts-state[data-semantic='CRITICAL_RISK'],
.ts-state[data-semantic='HIGH_RISK'] { color: var(--ts-state-critical-risk); }
.ts-state[data-semantic='UNKNOWN'],
.ts-state[data-semantic='NOT_VERIFIED'] { color: var(--ts-state-unknown); border-style: dashed; }
.ts-state[data-semantic='INCOMPLETE'] { color: var(--ts-state-incomplete); border-style: dashed; }
.ts-state[data-semantic='PROCESSING'] { color: var(--ts-state-processing); }
.ts-state[data-semantic='INFORMATION'] { color: var(--ts-state-information); }
.ts-state[data-semantic='ERROR'] { color: var(--ts-state-error); }

.ts-state__icon { inline-size: 1em; block-size: 1em; flex: none; text-align: center; }
.ts-visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}