/*
 * SenderRadar Design Tokens v1.0
 * Source: Brand brief — August 2026
 *
 * Theme strategy:
 * - :root is the public light context.
 * - [data-theme="dark"] is the admin / instrument context.
 * - Components should consume semantic tokens rather than raw palette tokens.
 */

:root {
  color-scheme: light;

  /* Brand palette */
  --sr-ink: #0e1b22;
  --sr-ink-2: #16262f;
  --sr-paper: #f5f3ee;
  --sr-paper-2: #ffffff;
  --sr-signal: #e08d4f;
  --sr-signal-text: #b96f35;
  --sr-sweep: #5fb3a1;
  --sr-critical: #c4554d;
  --sr-muted: #6b7a82;

  /* RGB channels for controlled alpha use */
  --sr-ink-rgb: 14 27 34;
  --sr-ink-2-rgb: 22 38 47;
  --sr-paper-rgb: 245 243 238;
  --sr-paper-2-rgb: 255 255 255;
  --sr-signal-rgb: 224 141 79;
  --sr-sweep-rgb: 95 179 161;
  --sr-critical-rgb: 196 85 77;
  --sr-muted-rgb: 107 122 130;

  /* Semantic surfaces */
  --sr-bg: var(--sr-paper);
  --sr-surface: var(--sr-paper-2);
  --sr-surface-raised: var(--sr-paper-2);
  --sr-surface-instrument: var(--sr-ink);
  --sr-surface-instrument-raised: var(--sr-ink-2);
  --sr-surface-subtle: rgb(var(--sr-ink-rgb) / 0.035);
  --sr-surface-hover: rgb(var(--sr-ink-rgb) / 0.055);
  --sr-surface-active: rgb(var(--sr-ink-rgb) / 0.085);
  --sr-overlay: rgb(var(--sr-ink-rgb) / 0.58);

  /* Semantic text */
  --sr-text: #1c2b33;
  --sr-text-inverse: #e8e4dc;
  --sr-text-muted: var(--sr-muted);
  --sr-text-subtle: #819098;
  --sr-text-on-signal: var(--sr-ink);
  --sr-text-link: var(--sr-signal-text);
  --sr-text-link-hover: #965727;
  --sr-text-disabled: rgb(var(--sr-ink-rgb) / 0.38);

  /* Borders and dividers */
  --sr-border: rgb(var(--sr-ink-rgb) / 0.14);
  --sr-border-strong: rgb(var(--sr-ink-rgb) / 0.24);
  --sr-border-subtle: rgb(var(--sr-ink-rgb) / 0.08);
  --sr-divider: rgb(var(--sr-ink-rgb) / 0.11);

  /* Interaction */
  --sr-action-primary: var(--sr-signal);
  --sr-action-primary-hover: #d17f43;
  --sr-action-primary-active: #bf6f36;
  --sr-action-secondary: transparent;
  --sr-focus: var(--sr-signal);
  --sr-selection-bg: rgb(var(--sr-signal-rgb) / 0.28);
  --sr-selection-text: var(--sr-text);

  /* Fixed score-state scale */
  --sr-state-healthy: var(--sr-sweep);
  --sr-state-attention: var(--sr-signal);
  --sr-state-critical: var(--sr-critical);
  --sr-state-neutral: var(--sr-muted);
  --sr-state-healthy-soft: rgb(var(--sr-sweep-rgb) / 0.14);
  --sr-state-attention-soft: rgb(var(--sr-signal-rgb) / 0.14);
  --sr-state-critical-soft: rgb(var(--sr-critical-rgb) / 0.12);
  --sr-state-neutral-soft: rgb(var(--sr-muted-rgb) / 0.12);

  /* Typography families */
  --sr-font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --sr-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sr-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Typography weights */
  --sr-font-regular: 400;
  --sr-font-medium: 500;
  --sr-font-semibold: 600;
  --sr-font-bold: 700;

  /* Type scale — brief-approved */
  --sr-text-13: 0.8125rem;
  --sr-text-14: 0.875rem;
  --sr-text-16: 1rem;
  --sr-text-20: 1.25rem;
  --sr-text-28: 1.75rem;
  --sr-text-44: 2.75rem;

  /* Line heights */
  --sr-leading-display: 1.1;
  --sr-leading-tight: 1.25;
  --sr-leading-ui: 1.35;
  --sr-leading-body: 1.5;

  /* Letter spacing */
  --sr-tracking-tight: -0.02em;
  --sr-tracking-normal: 0;
  --sr-tracking-label: 0.08em;

  /* Spacing — 4 px base */
  --sr-space-0: 0;
  --sr-space-1: 0.25rem;
  --sr-space-2: 0.5rem;
  --sr-space-3: 0.75rem;
  --sr-space-4: 1rem;
  --sr-space-5: 1.25rem;
  --sr-space-6: 1.5rem;
  --sr-space-8: 2rem;
  --sr-space-10: 2.5rem;
  --sr-space-12: 3rem;
  --sr-space-16: 4rem;
  --sr-space-20: 5rem;
  --sr-space-24: 6rem;

  /* Geometry */
  --sr-radius-field: 2px;
  --sr-radius-button: 2px;
  --sr-radius-card: 4px;
  --sr-radius-floating: 6px;
  --sr-radius-round: 999px;
  --sr-border-width: 1px;
  --sr-focus-width: 2px;
  --sr-focus-offset: 2px;

  /* Control sizes */
  --sr-control-sm: 2rem;
  --sr-control-md: 2.5rem;
  --sr-control-lg: 3rem;
  --sr-table-row-compact: 2.25rem;
  --sr-table-row-default: 2.5rem;

  /* Layout */
  --sr-content-narrow: 44rem;
  --sr-content-default: 72rem;
  --sr-content-wide: 90rem;
  --sr-gutter: clamp(1rem, 3vw, 2rem);

  /* Elevation — only for floating UI */
  --sr-shadow-menu: 0 8px 24px rgb(var(--sr-ink-rgb) / 0.16);
  --sr-shadow-modal: 0 20px 60px rgb(var(--sr-ink-rgb) / 0.24);

  /* Motion */
  --sr-duration-fast: 120ms;
  --sr-duration-default: 180ms;
  --sr-duration-slow: 280ms;
  --sr-duration-sweep: 10s;
  --sr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sr-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sr-ease-linear: linear;

  /* Radar texture */
  --sr-radar-grid-color: rgb(var(--sr-ink-rgb) / 0.04);
  --sr-radar-grid-opacity-max: 0.04;

  /* Component aliases */
  --sr-card-bg: var(--sr-surface);
  --sr-card-border: var(--sr-border);
  --sr-input-bg: var(--sr-surface);
  --sr-input-border: var(--sr-border-strong);
  --sr-input-placeholder: var(--sr-text-subtle);
  --sr-table-header: var(--sr-text-muted);
  --sr-table-divider: var(--sr-divider);
  --sr-code-bg: rgb(var(--sr-ink-rgb) / 0.055);
}

[data-theme="dark"] {
  color-scheme: dark;

  --sr-bg: var(--sr-ink);
  --sr-surface: var(--sr-ink-2);
  --sr-surface-raised: #1b2e38;
  --sr-surface-instrument: var(--sr-ink);
  --sr-surface-instrument-raised: var(--sr-ink-2);
  --sr-surface-subtle: rgb(var(--sr-paper-rgb) / 0.035);
  --sr-surface-hover: rgb(var(--sr-paper-rgb) / 0.06);
  --sr-surface-active: rgb(var(--sr-paper-rgb) / 0.09);
  --sr-overlay: rgb(0 0 0 / 0.62);

  --sr-text: #e8e4dc;
  --sr-text-inverse: #1c2b33;
  --sr-text-muted: #94a0a6;
  --sr-text-subtle: #7e8c93;
  --sr-text-on-signal: var(--sr-ink);
  --sr-text-link: #efa36a;
  --sr-text-link-hover: #f4b382;
  --sr-text-disabled: rgb(var(--sr-paper-rgb) / 0.36);

  --sr-border: rgb(var(--sr-paper-rgb) / 0.13);
  --sr-border-strong: rgb(var(--sr-paper-rgb) / 0.22);
  --sr-border-subtle: rgb(var(--sr-paper-rgb) / 0.075);
  --sr-divider: rgb(var(--sr-paper-rgb) / 0.105);

  --sr-action-primary: var(--sr-signal);
  --sr-action-primary-hover: #eca067;
  --sr-action-primary-active: #f2ae7b;
  --sr-selection-bg: rgb(var(--sr-signal-rgb) / 0.32);
  --sr-selection-text: var(--sr-text);

  --sr-state-healthy-soft: rgb(var(--sr-sweep-rgb) / 0.16);
  --sr-state-attention-soft: rgb(var(--sr-signal-rgb) / 0.16);
  --sr-state-critical-soft: rgb(var(--sr-critical-rgb) / 0.16);
  --sr-state-neutral-soft: rgb(var(--sr-muted-rgb) / 0.16);

  --sr-shadow-menu: 0 10px 28px rgb(0 0 0 / 0.34);
  --sr-shadow-modal: 0 24px 72px rgb(0 0 0 / 0.5);

  --sr-radar-grid-color: rgb(var(--sr-paper-rgb) / 0.04);

  --sr-card-bg: var(--sr-surface);
  --sr-card-border: var(--sr-border);
  --sr-input-bg: #102029;
  --sr-input-border: var(--sr-border-strong);
  --sr-input-placeholder: var(--sr-text-subtle);
  --sr-table-header: var(--sr-text-muted);
  --sr-table-divider: var(--sr-divider);
  --sr-code-bg: rgb(var(--sr-paper-rgb) / 0.055);
}

/* Optional reset / baseline. Remove this section when integrating into an existing reset. */
:where(html) {
  font-family: var(--sr-font-sans);
  font-size: 16px;
  color: var(--sr-text);
  background: var(--sr-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

:where(body) {
  margin: 0;
  color: var(--sr-text);
  background: var(--sr-bg);
  font-size: var(--sr-text-16);
  line-height: var(--sr-leading-body);
}

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

:where(::selection) {
  color: var(--sr-selection-text);
  background: var(--sr-selection-bg);
}

:where(a) {
  color: var(--sr-text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(a:hover) {
  color: var(--sr-text-link-hover);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--sr-focus-width) solid var(--sr-focus);
  outline-offset: var(--sr-focus-offset);
}

/* Data values are exact and copyable. Apply .sr-data to domains, IPs and DNS records. */
.sr-data,
.sr-domain,
.sr-ip,
.sr-dns-record,
.sr-log-value {
  font-family: var(--sr-font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Numeric alignment for scores and tables. */
.sr-score,
.sr-numeric,
.sr-table {
  font-variant-numeric: tabular-nums;
}

.sr-display {
  font-family: var(--sr-font-display);
  font-weight: var(--sr-font-semibold);
  line-height: var(--sr-leading-display);
  letter-spacing: var(--sr-tracking-tight);
}

.sr-label {
  color: var(--sr-text-muted);
  font-size: var(--sr-text-13);
  font-weight: var(--sr-font-semibold);
  line-height: var(--sr-leading-ui);
  letter-spacing: var(--sr-tracking-label);
  text-transform: uppercase;
}

/* Canonical score-state utility hooks. Never communicate state by color alone. */
[data-score-state="healthy"] {
  --sr-state-color: var(--sr-state-healthy);
  --sr-state-soft: var(--sr-state-healthy-soft);
}

[data-score-state="attention"] {
  --sr-state-color: var(--sr-state-attention);
  --sr-state-soft: var(--sr-state-attention-soft);
}

[data-score-state="critical"] {
  --sr-state-color: var(--sr-state-critical);
  --sr-state-soft: var(--sr-state-critical-soft);
}

[data-score-state="neutral"],
[data-score-state="pending"],
[data-score-state="unknown"] {
  --sr-state-color: var(--sr-state-neutral);
  --sr-state-soft: var(--sr-state-neutral-soft);
}

/* The single brand motion: radar sweep. */
@keyframes sr-sweep-rotate {
  to { transform: rotate(1turn); }
}

.sr-sweep-motion {
  transform-box: fill-box;
  transform-origin: center;
  animation: sr-sweep-rotate var(--sr-duration-sweep) var(--sr-ease-linear) infinite;
}

@keyframes sr-blip-fade {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .sr-sweep-motion {
    animation: none;
  }

  .sr-blip-motion {
    animation: sr-blip-fade 2.8s ease-in-out infinite;
  }
}