/* Exploitation Observatory design tokens, v1.
   Dense dark data UI with a cyberpunk edge. --obs-color-* may be swapped wholesale for an
   upstream design system's tokens; keep --obs-tier-* fixed, they carry meaning across every
   surface. The upstream this approximates is named in tokens.json, which is not shipped to
   visitors. */

:root {
  /* Ground and surfaces */
  --obs-color-bg: #0F0E17;
  --obs-color-surface: #171626;
  --obs-color-surface-2: #1F1D33;
  --obs-color-surface-3: #131224;
  --obs-color-border: #2E2B48;
  --obs-color-border-soft: #22203A;

  /* Text */
  --obs-color-text: #ECEAF6;
  --obs-color-text-secondary: #A49FC2;
  --obs-color-text-muted: #8A86A8;

  /* Primary (violet) and signal (cyan). Provenance of these values is recorded
     in tokens.json and design/brand/BRAND.md, not in the shipped stylesheet:
     the artifact every visitor downloads names no vendor. */
  --obs-color-primary: #632CA6;        /* filled buttons, white text on top */
  --obs-color-primary-text: #B79CFF;   /* links and purple text on dark */
  --obs-color-primary-text-hover: #D6C6FF;
  --obs-color-signal: #3EE8D8;         /* "live", "your fingerprint", one accent per screen */

  /* Tier palette. Fixed. Also differ in lightness, not just hue. */
  --obs-tier-none: #8A86A8;
  --obs-tier-none-text: #B8B4D0;
  --obs-tier-scanning: #5CB8FF;
  --obs-tier-attempts: #FFB84D;
  /* poc-validated was #FF6B9A, which sat ΔE 8.0 from confirmed #FF4D5E in
     normal vision, against a floor of 15. Those are the two highest-stakes
     values in the scale and they were the hardest pair on the page to tell
     apart. The replacement clears confirmed at ΔE 16.1 and also clears the
     primary link colour at 15.1, so a tier chip does not read as a link. */
  --obs-tier-poc-validated: #FF6BD6;
  --obs-tier-confirmed: #FF4D5E;

  /* Confidence (IOCs) reuses tier hues on purpose */
  --obs-conf-low: var(--obs-color-text-muted);
  --obs-conf-medium: var(--obs-tier-attempts);
  --obs-conf-high: var(--obs-color-signal);

  /* Type */
  --obs-font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --obs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --obs-text-xs: 11px;
  --obs-text-sm: 12px;
  --obs-text-base: 13px;
  --obs-text-md: 14px;
  --obs-text-lg: 15px;
  --obs-text-xl: 20px;
  --obs-text-2xl: 28px;
  --obs-text-3xl: 32px;
  --obs-tracking-label: .08em;   /* uppercase labels */
  --obs-tracking-tag: .12em;     /* mono tags like ACTIVE INCIDENT */

  /* Spacing (8pt grid) */
  --obs-space-1: 4px;
  --obs-space-2: 8px;
  --obs-space-3: 12px;
  --obs-space-4: 16px;
  --obs-space-5: 20px;
  --obs-space-6: 24px;
  --obs-space-8: 32px;

  /* Radius and elevation. Flat; one glow only, on the signal or tier color. */
  --obs-radius-sm: 3px;
  --obs-radius: 4px;
  --obs-radius-lg: 6px;
  --obs-glow-signal: 0 0 12px rgba(62, 232, 216, .4);
  --obs-glow-tier-poc: 0 0 24px rgba(255, 107, 214, .1);
  --obs-hairline-signal: 0 1px 0 rgba(62, 232, 216, .13);

  /* Layout */
  --obs-page-max: 1280px;
  --obs-gutter: 32px;
  --obs-gutter-mobile: 16px;
  --obs-header-h: 56px;
  --obs-touch-min: 44px;

  /* Alpha tints. The mockups hardcoded hex+alpha suffixes; these are the
     only ones used anywhere in the UI. bg = 1F, border = 66, wash = 0D/0F. */
  --obs-tier-none-bg: #8A86A81F;
  --obs-tier-none-border: #8A86A866;
  --obs-tier-scanning-bg: #5CB8FF1F;
  --obs-tier-scanning-border: #5CB8FF66;
  --obs-tier-attempts-bg: #FFB84D1F;
  --obs-tier-attempts-border: #FFB84D66;
  --obs-tier-poc-bg: #FF6BD61F;
  --obs-tier-poc-border: #FF6BD666;
  --obs-tier-confirmed-bg: #FF4D5E1F;
  --obs-tier-confirmed-border: #FF4D5E66;
  --obs-signal-bg: #3EE8D80F;
  --obs-signal-border: #3EE8D866;
  --obs-signal-wash: #3EE8D80D;
  --obs-signal-hairline: #3EE8D822;
  --obs-signal-panel-border: #3EE8D855;
  --obs-tier-poc-panel-border: #FF6BD655;
  --obs-tier-poc-wash: #FF6BD60D;
  --obs-tier-poc-active-bg: #FF6BD614;
  --obs-tier-poc-glow-bg: #FF6BD61A;
  --obs-tier-attempts-strong: #FFB84D99;
  --obs-primary-wash: #632CA61A;
}

/* Breakpoints (use in media queries): phone <= 720px, tablet 721 to 1024px, desktop > 1024px */

/* Tier chip recipe */
.obs-tier {
  font-family: var(--obs-font-mono);
  font-size: var(--obs-text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--obs-radius-sm);
  border: 1px solid;
  display: inline-block;
}
.obs-tier[data-tier="none"]          { color: var(--obs-tier-none-text);     border-color: var(--obs-tier-none-border);     background: var(--obs-tier-none-bg); }
.obs-tier[data-tier="scanning"]      { color: var(--obs-tier-scanning);      border-color: var(--obs-tier-scanning-border); background: var(--obs-tier-scanning-bg); }
.obs-tier[data-tier="attempts"]      { color: var(--obs-tier-attempts);      border-color: var(--obs-tier-attempts-border); background: var(--obs-tier-attempts-bg); }
.obs-tier[data-tier="poc-validated"] { color: var(--obs-tier-poc-validated); border-color: var(--obs-tier-poc-border);      background: var(--obs-tier-poc-bg); }
.obs-tier[data-tier="confirmed"]     { color: var(--obs-tier-confirmed);     border-color: var(--obs-tier-confirmed-border); background: var(--obs-tier-confirmed-bg); }