---
version: alpha
name: WebRadar Tactical Operations
description: Military/operator aesthetic with rugged sharp corners, olive-toned surfaces, and hard-edge shadows — for operators who run silent.

colors:
  # Backgrounds — Olive-Green Dark
  bg-base: "#0f1410"
  bg-panel: "#161d15"
  bg-card: "#1a2418"
  bg-card-hover: "#212e20"
  bg-border: "#2a3a28"
  bg-border-dim: "#1e2a1c"

  # Team — Military Tones
  t-color: "#d4a84b"
  t-dim: rgba(212,168,75,0.12)
  t-border: rgba(212,168,75,0.3)
  ct-color: "#5a8a6a"
  ct-dim: rgba(90,138,106,0.12)
  ct-border: rgba(90,138,106,0.3)

  # Text — Warmer
  primary: "#e8e4dc"
  on-surface: "#9a968c"
  muted: "#4a4a42"

  # Status — Muted Military
  hp-high: "#6aab6a"
  hp-mid: "#d4a84b"
  hp-low: "#c44536"
  money: "#7ab87a"

  # Surfaces
  surface-tint: "#d4a84b"
  surface-variant: "#1e2a1c"

typography:
  display-lg:
    fontFamily: TASAOrbiter
    fontSize: 28px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: TASAOrbiter
    fontSize: 24px
    fontWeight: 900
    lineHeight: 1
  headline-sm:
    fontFamily: TASAOrbiter
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: "0.02em"
  label-lg:
    fontFamily: TASAOrbiter
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.25em"
  label-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.1em"
  label-sm:
    fontFamily: TASAOrbiter
    fontSize: 9px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.25em"
  body-lg:
    fontFamily: TASAOrbiter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.2
  body-sm:
    fontFamily: TASAOrbiter
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.2
  caption:
    fontFamily: TASAOrbiter
    fontSize: 8px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: "0.06em"
  mono-display:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
  mono-dense:
    fontFamily: ui-monospace
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1

rounded:
  none: 0px
  sm: 2px
  DEFAULT: 3px
  md: 4px
  card: 4px
  panel: 3px

spacing:
  unit: 4px
  gap-xs: 2px
  gap-sm: 4px
  gap-md: 6px
  gap-lg: 8px
  gap-xl: 10px
  pad-xs: "2px 5px"
  pad-sm: "4px 6px"
  pad-md: "6px 10px"
  pad-lg: "8px 12px"
  pad-xl: "16px 14px"
  panel-min-width: 140px

components:
  player-card:
    backgroundColor: "{colors.bg-card}"
    textColor: "{colors.primary}"
    rounded: "{rounded.card}"
    padding: "{spacing.pad-sm}"
    height: 72px
  player-card-hover:
    backgroundColor: "{colors.bg-card-hover}"
    textColor: "{colors.primary}"
  scoreboard:
    backgroundColor: "{colors.bg-panel}"
    rounded: "{rounded.panel}"
  settings-panel:
    backgroundColor: "{colors.bg-panel}"
    textColor: "{colors.primary}"
    rounded: "{rounded.panel}"
  radar-container:
    backgroundColor: "{colors.bg-base}"
    rounded: "{rounded.card}"
  bomb-timer:
    backgroundColor: "#1a1208"
    rounded: "{rounded.md}"
  connecting-ring:
    backgroundColor: transparent
    size: 44px
  c4-badge:
    backgroundColor: rgba(196,69,54,0.2)
    rounded: "{rounded.sm}"
  separator:
    backgroundColor: "{colors.bg-border-dim}"
    height: 1px
  team-label-t:
    textColor: "{colors.t-color}"
    typography: "{typography.label-sm}"
  team-label-ct:
    textColor: "{colors.ct-color}"
    typography: "{typography.label-sm}"
  t-badge:
    backgroundColor: "{colors.t-dim}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
  ct-badge:
    backgroundColor: "{colors.ct-dim}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
  health-bar-high:
    backgroundColor: "{colors.hp-high}"
    rounded: none
    height: 3px
  health-bar-mid:
    backgroundColor: "{colors.hp-mid}"
    rounded: none
    height: 3px
  health-bar-low:
    backgroundColor: "{colors.hp-low}"
    rounded: none
    height: 3px
  money-display:
    textColor: "{colors.money}"
    typography: "{typography.mono-dense}"
  team-border-t:
    backgroundColor: "{colors.t-border}"
    height: 1px
  team-border-ct:
    backgroundColor: "{colors.ct-border}"
    height: 1px
  muted-label:
    textColor: "{colors.muted}"
    typography: "{typography.caption}"
---

# Brand & Style

Tactical Operations is the hard-edge military variant — for operators who prefer **function over form**, where every pixel earns its place and soft curves are a liability. The brand personality is **Military Operator**: rugged, utilitarian, zero-nonsense.

The emotional tone is stern and deliberate. Surfaces are olive-tinted darks (not neutral blacks), team colors are desaturated to field-recognizable tones (gold for T, olive-green for CT), and corner radii are cut to tactical minimums — 3px for panels, 4px for cards, 0px for the connecting ring (it's a square, like a military crate stamp).

This theme trades Default's "Rebirth softness" for **hard-edge authority**. Shadows are offset, not centered — the 2px/4px hard offset shadow creates a "stamped metal" elevation effect that echoes physical military hardware.

# Colors

The palette swaps neutral darks for **olive-forest understory** tones. All surfaces carry a green-brown cast.

- **Surface Hierarchy**: `#0f1410` (deep forest floor) → `#161d15` (olive panel) → `#1a2418` (moss card). Each step lifts toward a warmer, slightly green-tinted lightness. Hover state at `#212e20`.
- **Team Colors — Field-Toned**: Amber `#f5a623` becomes **Dull Gold `#d4a84b`** (T). Blue `#4a9eff` becomes **Olive Drab `#5a8a6a`** (CT). These are military-standard identification colors — visible but not flashy. Border opacity boosted to 30% for the harder aesthetic.
- **Status Colors**: Green health is muted to `#6aab6a` (field green). Amber mid remains `#d4a84b` (shared with T-color). Red low shifts to **Vermillion `#c44536`** — a warmer, brick-red military danger color.
- **Text**: Primary text warms to `#e8e4dc` (parchment), secondary to `#9a968c` (faded khaki), muted to `#4a4a42` (dark olive-gray). These are easier on the eyes during long sessions under low-light conditions.
- **Background Gradient**: Olive tones with a subtle radial gold-wash at the top (5% opacity `#d4a84b` glow), simulating low-angle sunlight through canopy.

# Typography

Typography scale is identical to Default but with **widened letter-spacing** on labels (0.25em vs Default's 0.18em) for maximum readability at distance.

- **Label Weight**: Reduced from 800 to 700 — military stencils are bold, not black. The wider letter-spacing compensates for the weight reduction.
- **No Glow Effects**: Text-shadow and drop-shadow glow are *strictly prohibited* in this theme. Tactical operators don't use neon.

# Layout & Spacing

Layout structure is identical to Default. The Tactical identity is expressed through **surface color, corner sharpness, and shadow direction**.

- **Scoreboard Flanking**: The scoreboard gains `border-left: 2px solid t-color` and `border-right: 2px solid ct-color`, creating a physical "face-off" marker between the teams. During bomb state, both borders switch to `hp-low` red.
- **Bomb Timer Fanking**: `border-left: 3px solid hp-low` and `border-right: 3px solid hp-low` — thicker, more urgent than the scoreboard markers.

# Elevation & Depth

Depth is conveyed through **offset hard shadows** — emulating stamped metal or sandbag stacking, not luminosity gradients or glow.

- **Level 0 (Base)**: `#0f1410` — darkest, deepest surface.
- **Level 1 (Panel)**: `#161d15` — structural containers.
- **Level 2 (Card)**: `#1a2418` — cards and list items.
- **Shadow System**: Player cards use `2px 2px 0 rgba(0,0,0,0.3)` (offset bottom-right), not centered blur. On hover, the offset increases to `4px 4px 0 rgba(0,0,0,0.4)` with a `-1px translateY` lift. The inset highlight reduces to `0.03` → `0.05` alpha on hover.
- **Scoreboard Inset**: A large `inset 0 0 20px rgba(0,0,0,0.3)` makes the scoreboard feel like a recessed display panel — data projected into a cavity.
- **No Backdrop Blur**: The Tactical theme does not use `backdrop-filter: blur()`. Panels are opaque by design.

# Shapes

Shapes are **hard and minimal** — a deliberate inversion of the "Rebirth" rounded language.

- **Cards**: `4px` radius — the minimum for visual safety without appearing rounded.
- **Panels**: `3px` — nearly square. Only present to prevent sub-pixel rendering artifacts.
- **Scoreboard**: `3px` — same as panels, unified severity.
- **Connecting Ring**: `0px` (square) — the only element that goes fully sharp, referencing military crate stamps.
- **Radar**: `4px` — matching cards.
- **Scrollbar Thumb**: `2px` radius.

# Components

## Player Card

The card uses offset hard-shadow instead of rounded soft-shadow, creating a "raised tag" physicality. `box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 2px 2px 0 rgba(0,0,0,0.3)`. On hover, the shadow grows and shifts — `4px 4px 0` — and the card lifts by `-1px`.

## Scoreboard

Flanked by colored team borders (2px solid). During bomb rounds, both borders switch to `hp-low` color. Inset darkening (`0 0 20px rgba(0,0,0,0.3)`) creates a recessed display cavity.

## Bomb Timer

Uses `background: #1a1208` (dark olive-brown) with `3px solid hp-low` left and right borders — thicker than the scoreboard flanking markers for urgency. The wider border width (3px vs 2px) signals escalation.

## C4 Badge

Square-ish (2px radius) with a `2px solid hp-low` border and `rgba(196,69,54,0.2)` fill — the badge looks like a physical tag or label. C4 pulse animation uses a spreading ring (0 → 4px) rather than a glow.

## Connecting Ring

The ONLY square connecting ring in the theme system. `border-radius: 0` turns the spinner into a rotating military crate stamp. Border-top-color uses the gold T-color instead of CT blue.

## Radar Container

`4px` radius with `inset 0 0 30px rgba(0,0,0,0.3)` creating a vignette effect — the radar feels like looking through a scope or recessed viewport.

# Do's and Don'ts

**Do**:
- Use hard-edge offset shadows (2px/4px offset, 0 spread) for elevated elements
- Apply wider letter-spacing (0.25em) on team labels for military stencil readability
- Use opaque panels with inset darkening instead of glass/blur effects
- Respect the warm parchment text color (`#e8e4dc`) — it reduces eye strain in low light
- Keep corner radii at tactical minimums (3–4px panels, 2px small elements)
- Use the gold T-color as the primary accent (connecting ring, surface tint)

**Don't**:
- Never apply `text-shadow` glow effects — this is not a neon theme
- Never use `backdrop-filter: blur()` — panels must be opaque and solid
- Don't exceed 4px corner radius on any element — the sharp aesthetic is the identity
- Avoid pure blue team colors — the olive CT identity `#5a8a6a` must remain distinct from the Default blue
- Don't use centered box-shadows — offset shadows (bottom-right) create the "stamped" aesthetic
- Never round the connecting ring — 0px is non-negotiable for the military stamp
