/* Trooper Watchtower design tokens.
   Inherited from PluginVault, plus the changes agreed in design review.
   Drop into static/css/ and reference via var(--…). */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

:root {
  /* Surfaces */
  --wt-bg: #FFFFFF;
  --wt-surface-alt: #F5F5F7;        /* row hover, code tiles, badges, expanded panels */
  --wt-row-hover: #FBFBFC;
  --wt-border: rgba(0, 0, 0, 0.10);  /* cards, sections */
  --wt-border-subtle: rgba(0, 0, 0, 0.07); /* row separators */

  /* Text */
  --wt-text: #1D1D1F;
  --wt-text-2: #6E6E73;
  --wt-text-3: #98989D;

  /* Brand */
  --wt-accent: #7323FF;              /* links, active nav, focus, secondary buttons, selected filter card */
  --wt-accent-hover: #5A12D6;
  --wt-cta: #FF00E9;                 /* primary action inside modals, Log In */

  /* Status */
  --wt-warning: #E67E00;             /* dots, icons, numbers >= 20px only (2.9:1 on white) */
  --wt-warning-text: #7A4300;        /* text inside warning bands */
  --wt-warning-strong: #B45F00;      /* small warning text on white, e.g. "17d past Sep 26" */
  --wt-warning-bg: #FFF6E8;
  --wt-warning-border: #FFD9A3;
  --wt-warning-ink: #3A2000;         /* text on a --wt-warning fill (6:1) */
  --wt-caution-bg: #FFF4C7;          /* yellow: the Muted pill */
  --wt-caution-border: #F2D266;
  --wt-caution-text: #664700;        /* 7:1 on --wt-caution-bg */
  --wt-critical: #F90D0D;            /* clone/restore/disconnected dots, non-zero Disconnected count */
  --wt-ok: #157F3B;                  /* heartbeat ok text and dot */

  /* Environment toggle only. Functional signal colors, used nowhere else. */
  --wt-toggle-production: #157F3B;   /* "PRODUCTION LIVE" fill, white label */
  --wt-toggle-staging: #C62828;      /* "STAGING LIVE" fill, white label */

  /* Footer */
  --wt-footer-bg: #000000;
  --wt-footer-text: #9A9A9A;

  /* Top bar */
  --wt-gradient: linear-gradient(90deg, #0a0b1f 0%, #1b2a8c 25%, #3346e0 45%, #5a3ad1 65%, #7a2a8a 85%, #8f1f6e 100%);
  --wt-gradient-h: 15px;
  --wt-topbar-h: 56px;

  /* Type */
  --wt-font-display: "Poppins", sans-serif;  /* wordmark, headings, nav, buttons, labels, numbers */
  --wt-font-body: "Roboto", system-ui, sans-serif; /* body, tables, inputs */
  --wt-font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* timestamps, UUIDs */
  --wt-h1: 700 26px/1.2 var(--wt-font-display);   /* 24px under 820px */
  --wt-stat: 700 30px/1 var(--wt-font-display);    /* letter-spacing -0.02em */
  --wt-label: 600 12px/1.2 var(--wt-font-display); /* uppercase, letter-spacing .06em, --wt-text-3 */
  --wt-body: 400 14px/1.45 var(--wt-font-body);
  --wt-meta: 400 12px/1.4 var(--wt-font-body);

  /* Shape */
  --wt-radius: 6px;        /* cards, buttons, inputs, tiles, toggle ends */
  --wt-radius-pill: 999px; /* filter chips, muted tag */
  --wt-shadow-menu: 0 12px 24px rgba(0, 0, 0, 0.08);
  --wt-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25);

  /* Layout */
  --wt-content-max: 1240px;
  --wt-gutter: 40px;          /* 16px under 820px */
  --wt-breakpoint: 820px;     /* reference only; media queries use the literal */
  --wt-row-min-h: 80px;
  --wt-toggle-w: 300px;       /* list rows; 400px on Website Detail header */
  --wt-toggle-h: 52px;        /* 60px on Website Detail header */
  --wt-touch: 44px;           /* minimum touch target */
}