---
version: alpha
name: WebRadar Clean Minimal
description: Premium minimalist light theme with elegant simplicity, clean shadows, and warm paper tones — for operators who prefer daylight clarity.

colors:
  # Backgrounds — Light/Paper
  bg-base: "#faf9f7"
  bg-panel: "#ffffff"
  bg-card: "#f5f4f2"
  bg-card-hover: "#ffffff"
  bg-border: "#e8e6e3"
  bg-border-dim: "#f0eee9"

  # Team — Muted Elegant
  t-color: "#d97706"
  t-dim: rgba(217,119,6,0.08)
  t-border: rgba(217,119,6,0.2)
  ct-color: "#2563eb"
  ct-dim: rgba(37,99,235,0.08)
  ct-border: rgba(37,99,235,0.2)

  # Text — Dark on Light
  primary: "#1a1917"
  on-surface: "#6b6965"
  muted: "#c4c1bc"

  # Status — Clean
  hp-high: "#16a34a"
  hp-mid: "#ca8a04"
  hp-low: "#dc2626"
  money: "#16a34a"

  # Surfaces
  surface-tint: "#2563eb"
  surface-variant: "#f0eee9"

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: 600
    lineHeight: 1
    letterSpacing: "0.12em"
  label-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.1em"
  label-sm:
    fontFamily: TASAOrbiter
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.12em"
  body-lg:
    fontFamily: TASAOrbiter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: TASAOrbiter
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: TASAOrbiter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.2
  caption:
    fontFamily: TASAOrbiter
    fontSize: 8px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.06em"
  mono-display:
    fontFamily: ui-monospace
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
  mono-dense:
    fontFamily: ui-monospace
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1

rounded:
  none: 0px
  sm: 4px
  DEFAULT: 6px
  md: 8px
  card: 8px
  panel: 8px

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}"
  player-card-hover:
    backgroundColor: "{colors.bg-card-hover}"
    textColor: "{colors.primary}"
  scoreboard:
    backgroundColor: "{colors.bg-panel}"
    rounded: 6px
  settings-panel:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: 8px
  radar-container:
    backgroundColor: "{colors.bg-base}"
    rounded: 8px
  bomb-timer:
    backgroundColor: "#ffffff"
    rounded: 6px
  connecting-ring:
    backgroundColor: transparent
    size: 44px
  c4-badge:
    backgroundColor: rgba(220,38,38,0.06)
    rounded: 4px
  separator:
    backgroundColor: "{colors.bg-border}"
    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: "{rounded.sm}"
    height: 3px
  health-bar-mid:
    backgroundColor: "{colors.hp-mid}"
    rounded: "{rounded.sm}"
    height: 3px
  health-bar-low:
    backgroundColor: "{colors.hp-low}"
    rounded: "{rounded.sm}"
    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

Clean Minimal is the **daylight mode** — a premium minimalist light theme that inverts every dark-theme convention. The brand personality is **Editorial Clarity**: warm paper, clean lines, generous light, and restrained color.

The emotional tone is calm and composed. Where every other theme is a variation on darkness, Minimal exists in full daylight — surfaces are paper-white, shadows are featherlight, and team colors are presented at their most restrained. This is for operators who run their radar alongside productive work, in well-lit environments, or during marathon sessions where dark-mode fatigue sets in.

This theme is a rarity — most competitive players default to dark modes. But for streamers running browser overlays alongside chat, editors reviewing footage, or analysts working in bright offices, the light variant provides essential readability without sacrificing the tactical information density.

# Colors

The palette flips the entire system — dark surfaces become **warm paper whites**, and text becomes **near-black ink**.

- **Surface Hierarchy**: `#faf9f7` (warm off-white base) → `#ffffff` (pure white panel) → `#f5f4f2` (slightly warm card). The progression moves from warm → cool → warm, with cards being the *warmest* surface (counterintuitive but deliberate — it prevents the "clinical white" feeling).
- **Team Colors — Muted Elegant**: Amber `#f5a623` becomes **Amber 700 `#d97706`** (T). Blue `#4a9eff` becomes **Blue 600 `#2563eb`** (CT). Both are deepened significantly for contrast against light backgrounds. Fill and border opacity are reduced (8% / 20%) — on light surfaces, team colors should feel like subtle ink stamps, not paint.
- **Text Inversion**: Primary text `#1a1917` (warm near-black), secondary `#6b6965` (warm gray), muted `#c4c1bc` (light warm gray). The warm undertone prevents the starkness of pure black-on-white.
- **Status Colors**: Tailwind standard colors — `green-600 #16a34a`, `yellow-600 #ca8a04`, `red-600 #dc2626`. These are the safest, most accessible choices on light backgrounds, passing WCAG AA against white.
- **Background Gradient**: `linear-gradient(180deg, #faf9f7 → #f5f4f2)` — a subtle top-to-bottom warm-to-cooler gradient that prevents the flat-white monotony.

# Typography

Typography scale is identical to Default but with **reduced weight** across labels — `w600` instead of `w800` for label levels. Inverse contrast (dark text on light background) provides inherent legibility, so heavy weight is unnecessary.

- **Label Weight**: Reduced to 600 — on light backgrounds, lighter weight is more elegant. The weight reduction is compensated by slightly larger label-sm (10px vs Default's 9px).
- **No Text Shadow**: `text-shadow: 0 1px 2px rgba(0,0,0,0.1)` is permitted only on specific elements (bomb timer text) and must never appear on labels or body text.
- **Inherited Color Override**: Several CSS rules explicitly override inline `rgba(255,255,255,...)` styles that would render invisible on light backgrounds. These overrides are essential — the React components were built for dark themes and frequently use white/white-adjacent text.

# Layout & Spacing

Structural layout is identical to Default. The Minimal identity is expressed through **surface brightness, shadow weight, and border subtlety**.

- **Shadow Weight**: All shadows are dramatically lighter — `0 1px 2px rgba(0,0,0,0.04)` for cards (vs Default's deep shadows), `0 2px 8px rgba(0,0,0,0.06)` for panels. These are "paper on desk" shadows, not "floating in void" shadows.
- **Scrollbar**: 6px width (vs Default's 4px) with 3px rounded thumb. On light backgrounds, scrollbars need to be slightly more visible.

# Elevation & Depth

Depth on light surfaces is conveyed through **shadow weight intensity**, not luminosity stepping.

- **Level 0 (Base)**: `#faf9f7` — the warm off-white base.
- **Level 1 (Panel)**: `#ffffff` — the brightest possible surface. Panels are the "top layer."
- **Level 2 (Card)**: `#f5f4f2` — slightly darker than the base. Cards "sink" relative to panels.
- **Shadow Scale**: Card rest `0 1px 2px rgba(0,0,0,0.04)` → Card hover `0 4px 12px rgba(0,0,0,0.08)` → Panel `0 2px 8px rgba(0,0,0,0.06)` → Settings `0 8px 24px rgba(0,0,0,0.08)`. The progression is geometric (doubling shadow depth per elevation step).
- **No Backdrop Blur**: Minimal uses opaque surfaces only — `backdrop-filter` would be redundant on white backgrounds.
- **No Inner Glow**: The `inset 0 1px 0 rgba(255,255,255,0.04)` highlight present in dark themes is removed entirely — white-on-white inner highlights are invisible.

# Shapes

Rounded values are **more uniform** than Default — all panels and cards converge on `8px`, creating a consistent "rounded rectangle" language without the hierarchical distinction of Default's 10px/14px split.

- **Cards**: `8px` — unified with panel radius.
- **Panels**: `8px` — unified with card radius.
- **Scoreboard**: `6px` — slightly tighter for density.
- **Settings Panel**: `8px` — matching panels.
- **Radar**: `8px` — matching panels.
- **Small Elements**: `4px` for badges, `6px` for inputs.

# Components

## Player Card

Cards use the lightest possible shadow — `0 1px 2px rgba(0,0,0,0.04)` at rest, growing to `0 4px 12px rgba(0,0,0,0.08)` on hover. No inset highlights. No glow effects. The card's elevation is expressed purely through shadow spread.

## Scoreboard

A clean white container with a `1px solid` border and `0 2px 8px rgba(0,0,0,0.06)` shadow. The `6px` radius is tighter than the 8px standard, giving the scoreboard a slightly more "structured" feel appropriate for a data container.

## Bomb Timer

Pure white `#ffffff` background with `2px solid hp-low` red borders on left and right. The colored flanking borders signal urgency through color, not through glow intensity. Shadow is restrained: `0 2px 8px rgba(0,0,0,0.08)`.

## C4 Badge

Ultra-subtle: `rgba(220,38,38,0.06)` fill with `1px solid rgba(220,38,38,0.2)` border and `4px` radius. The badge is nearly transparent — its existence is signaled by the red border, not by visual weight.

## Settings Panel

Pure white `#ffffff` with `8px` radius and `0 8px 24px rgba(0,0,0,0.08)` shadow. The lightest panel shadow in the system.

## Text Color Overrides

Multiple CSS rules force dark text on elements that use inline `rgba(255,255,255,...)` styles — a necessary compatibility layer since the React components default to dark-mode inline colors. These include:
- `[style*="rgba(255,255,255"]` → inherit primary text color
- `[style*="var(--text-primary)"]` → force `#1a1917`
- `[style*="var(--text-secondary)"]` → force `#6b6965`
- `[style*="var(--text-muted)"]` → force `#c4c1bc`
- `[style*="var(--money)"]` → force green money color

## Connecting Ring

Standard circular spinner with `border-top-color` in CT blue `#2563eb`. `border-radius: 50%` (circular, unlike Tactical's square).

# Do's and Don'ts

**Do**:
- Use the warm paper palette (`#faf9f7`, `#f5f4f2`) — never pure `#ffffff` for the base
- Keep shadows at `rgba(0,0,0,0.04–0.08)` — the lightest possible
- Use team colors as subtle stamps (8% fill, 20% border) — not as bold accents
- Apply `font-weight: 600` for labels — lighter than dark themes but still authoritative
- Force text color overrides on any component using dark-mode inline styles
- Test all text colors against `#ffffff` panels for WCAG AA compliance (4.5:1 minimum)

**Don't**:
- Never use `text-shadow` on labels or body text — minimal means clean
- Never apply glow effects (box-shadow with team-color, drop-shadow, text-shadow 0 0 Xpx) — these are dark-theme tools
- Avoid `inset` shadows — they imply depth recession that works against the light-layered aesthetic
- Don't use `#ffffff` as the bg-base — the warm off-white `#faf9f7` prevents clinical sterility
- Don't apply pure `#000000` text — use `#1a1917` (warm black) for softness
- Never rely on backdrop-filter — it's invisible on white surfaces and adds GPU overhead
