/* ======================================================================== * Argus design tokens — the ONLY file allowed to contain raw values. * Every other stylesheet must reference these tokens. * * Conventions: * - Spacing snaps to a 4px grid (1px hairlines exempted). * - Colour is OKLCH for perceptual evenness. * - Three weights: 400/500/600 — never 700. * - Motion ≤300ms, eased; linear easing forbidden except shimmer. * * Update process: edit a token here, never override per-element. If you * need a new value, add a new token rather than introducing a one-off. * ====================================================================== */ /* ─── Fonts: Google Fonts Inter only (loaded via index.html) ───────── */ /* No self-hosted @font-face. No JetBrains Mono. Inter for everything. */ :root { /* ─── Spacing (4px grid) ──────────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-0_5: 2px; /* hairline insets only */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ─── Radii ───────────────────────────────────────────────────── */ --radius-none: 0; --radius-xs: 3px; /* type chips */ --radius-sm: 4px; /* small inputs, badges */ --radius-md: 6px; /* buttons, cards */ --radius-lg: 10px; /* panels, popovers */ --radius-xl: 14px; /* modals */ --radius-pill: 999px; /* ─── Borders — Catppuccin surface hairlines ───────────────────── */ --border-width: 1px; /* Note: --border-subtle / --border-default / --border-strong are also defined in themes.css under :root and rebound per data-theme. The values here are now *overrides* shadowed by the theme layer and intentionally redirect to the same Catppuccin tokens so the legacy direct lookup of --border-subtle from tokens.css keeps resolving to the right flavour-aware value. */ --border-subtle: var(--ctp-surface0); --border-default: var(--ctp-surface1); --border-strong: var(--ctp-surface2); --grid-line: var(--ctp-surface0); /* ─── Typography — Inter only, single family across the app ──────── */ /* `--font-mono` is kept as a token name for back-compat but resolves to Inter with tabular-nums, so KPI numerals still align in columns. */ --font-sans: "Inter", system-ui, sans-serif; --font-mono: "Inter", system-ui, sans-serif; --font-display: "Inter", system-ui, sans-serif; /* ─── Type ramp — strict 7 steps: 11/12/13/15/18/24/32 (FIX 2) ── */ /* Token names kept for back-compat; values collapse onto the ramp. Out-of-ramp aliases (2xs, md, 3xl) round to the nearest allowed. */ --text-2xs-size: 11px; --text-2xs-lh: 1.45; /* round 10→11 */ --text-xs-size: 11px; --text-xs-lh: 1.45; --text-sm-size: 12px; --text-sm-lh: 1.5; --text-base-size: 13px; --text-base-lh: 1.45; --text-md-size: 13px; --text-md-lh: 1.45; /* round 14→13 */ --text-lg-size: 15px; --text-lg-lh: 1.4; /* round 16→15 */ --text-xl-size: 18px; --text-xl-lh: 1.3; /* round 20→18 */ --text-2xl-size: 24px; --text-2xl-lh: 1.1; /* round 28→24 */ --text-3xl-size: 32px; --text-3xl-lh: 1.05; /* display only */ /* Direct ramp tokens — for new code. */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-display: 32px; /* ─── Weights — 3 only: 400/500/700 (FIX 2) ───────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 700; /* token kept for back-compat → 700 now */ --fw-bold: 700; /* ─── Tracking ────────────────────────────────────────────────── */ --tracking-display: -0.022em; --tracking-heading: -0.012em; --tracking-body: -0.005em; --tracking-ui: -0.003em; --tracking-mono: 0; --tracking-label: 0.06em; --tracking-caps: 0.04em; /* ─── Catppuccin-backed token aliases ───────────────────────────── Every legacy variable below points at the Catppuccin raw palette (--ctp-*) — NOT at the semantic layer in themes.css, because themes.css's :root and this :root block have equal specificity and tokens.css loads later, so any name defined in BOTH files would have its value taken from THIS block. Self-referencing `var(--bg-elevated): var(--bg-elevated)` was creating a cycle and silently invalidating the token. Direct --ctp-* references resolve to the active flavour without cycle risk. */ /* Background ramp */ --bg-base: var(--ctp-base); --bg-deep: var(--ctp-crust); --bg-surface: var(--ctp-mantle); --bg-elevated: var(--ctp-surface0); --bg-inset: var(--ctp-crust); --bg-0: var(--ctp-base); --bg-1: var(--ctp-mantle); --bg-2: var(--ctp-surface0); --bg-3: var(--ctp-surface1); --bg-4: var(--ctp-surface1); /* Foreground */ --text-quaternary: var(--ctp-overlay0); /* Accent palette — original sci-fi names → Catppuccin equivalents */ --accent-blue: var(--ctp-blue); --accent-cyan: var(--ctp-sky); --accent-purple: var(--ctp-mauve); --accent-magenta: var(--ctp-red); --accent-teal: var(--ctp-teal); --accent-orange: var(--ctp-peach); --accent-yellow: var(--ctp-yellow); --accent-green: var(--ctp-green); --accent-lavender:var(--ctp-lavender); --accent-sapphire:var(--ctp-sapphire); --accent-rosewater:var(--ctp-rosewater); --accent-maroon: var(--ctp-maroon); --accent-pink: var(--ctp-pink); /* Primary accent → Catppuccin Mauve per spec */ --accent: var(--accent-primary); --accent-hover: var(--ctp-lavender); --accent-active: var(--ctp-mauve); --accent-muted: color-mix(in srgb, var(--ctp-mauve) 14%, transparent); --accent-border: color-mix(in srgb, var(--ctp-mauve) 40%, transparent); --accent-text: var(--accent-primary); /* Severity ramp — Catppuccin per spec */ --sev-crit-bg: color-mix(in srgb, var(--ctp-red) 18%, transparent); --sev-crit-border: color-mix(in srgb, var(--ctp-red) 45%, transparent); --sev-crit-text: var(--severity-critical); --sev-crit-bar: var(--severity-critical); --sev-high-bg: color-mix(in srgb, var(--ctp-maroon) 18%, transparent); --sev-high-border: color-mix(in srgb, var(--ctp-maroon) 45%, transparent); --sev-high-text: var(--severity-high); --sev-high-bar: var(--severity-high); --sev-med-bg: color-mix(in srgb, var(--ctp-peach) 18%, transparent); --sev-med-border: color-mix(in srgb, var(--ctp-peach) 45%, transparent); --sev-med-text: var(--severity-medium); --sev-med-bar: var(--severity-medium); --sev-low-bg: color-mix(in srgb, var(--ctp-yellow) 18%, transparent); --sev-low-border: color-mix(in srgb, var(--ctp-yellow) 45%, transparent); --sev-low-text: var(--severity-low); --sev-low-bar: var(--severity-low); --sev-info-bg: color-mix(in srgb, var(--ctp-sapphire) 18%, transparent); --sev-info-border: color-mix(in srgb, var(--ctp-sapphire) 45%, transparent); --sev-info-text: var(--severity-info); --sev-info-bar: var(--severity-info); /* AI / ML / Hunt → Mauve */ --ai-bg: color-mix(in srgb, var(--ctp-mauve) 14%, transparent); --ai-border: color-mix(in srgb, var(--ctp-mauve) 40%, transparent); --ai-text: var(--ctp-mauve); --ai-bar: var(--ctp-mauve); /* Live / Streaming → Green per spec */ --live-bg: color-mix(in srgb, var(--ctp-green) 14%, transparent); --live-border: color-mix(in srgb, var(--ctp-green) 45%, transparent); --live-text: var(--status-live); --live-bar: var(--status-live); /* Status legacy aliases */ --ok-bg: color-mix(in srgb, var(--ctp-green) 14%, transparent); --ok-border: color-mix(in srgb, var(--ctp-green) 40%, transparent); --ok-text: var(--ctp-green); --ok-solid: var(--ctp-green); --warn-bg: color-mix(in srgb, var(--ctp-yellow) 14%, transparent); --warn-border: color-mix(in srgb, var(--ctp-yellow) 40%, transparent); --warn-text: var(--ctp-yellow); --warn-solid: var(--ctp-yellow); --crit-bg: var(--sev-crit-bg); --crit-border: var(--sev-crit-border); --crit-text: var(--sev-crit-text); --crit-solid: var(--sev-crit-bar); /* Stream-type tints — Catppuccin per spec */ --stream-ioc: color-mix(in srgb, var(--ctp-sapphire) 14%, transparent); --stream-ioc-text: var(--stream-ioc); --stream-cert: color-mix(in srgb, var(--ctp-peach) 14%, transparent); --stream-cert-text: var(--ctp-peach); --stream-actor: color-mix(in srgb, var(--ctp-mauve) 14%, transparent); --stream-actor-text: var(--ctp-mauve); --stream-live: var(--live-bg); --stream-live-text: var(--status-live); /* TLP — official tokens (TLP standard mandates these specific colours, so they're the one place we can't substitute Catppuccin) */ --tlp-red: #FF2B2B; --tlp-amber: #FFC000; --tlp-green: #33FF00; --tlp-clear: #FFFFFF; /* Glow tokens — derived from Catppuccin accents */ --glow-blue: 0 0 12px color-mix(in srgb, var(--ctp-blue) 35%, transparent), 0 0 32px color-mix(in srgb, var(--ctp-blue) 15%, transparent); --glow-cyan: 0 0 10px color-mix(in srgb, var(--ctp-sapphire) 45%, transparent), 0 0 24px color-mix(in srgb, var(--ctp-sapphire) 18%, transparent); --glow-magenta: 0 0 10px color-mix(in srgb, var(--ctp-red) 40%, transparent), 0 0 28px color-mix(in srgb, var(--ctp-red) 18%, transparent); --glow-purple: 0 0 10px color-mix(in srgb, var(--ctp-mauve) 35%, transparent); --glow-orange: 0 0 10px color-mix(in srgb, var(--ctp-peach) 35%, transparent); --shadow-card: 0 1px 0 color-mix(in srgb, var(--ctp-text) 4%, transparent) inset, 0 8px 24px color-mix(in srgb, var(--ctp-crust) 40%, transparent); /* Gradient washes */ --grad-hero: linear-gradient(135deg, color-mix(in srgb, var(--ctp-mauve) 6%, transparent), color-mix(in srgb, var(--ctp-lavender) 4%, transparent) 50%, transparent); --grad-live: linear-gradient(180deg, color-mix(in srgb, var(--ctp-sapphire) 7%, transparent), transparent 60%); /* Neutral chip */ --neutral-chip-bg: var(--bg-hover); --neutral-chip-text: var(--text-secondary); /* Selection — already defined in themes.css; alias kept for legacy call-sites that read from tokens.css */ --select-bg: color-mix(in srgb, var(--ctp-mauve) 25%, transparent); --select-text: var(--text-primary); /* ─── Elevation ────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow-sm: 0 2px 4px -1px rgb(0 0 0 / 0.32), 0 1px 2px 0 rgb(0 0 0 / 0.24); --shadow-md: 0 6px 16px -4px rgb(0 0 0 / 0.4), 0 2px 4px -1px rgb(0 0 0 / 0.28); --shadow-lg: 0 20px 48px -12px rgb(0 0 0 / 0.5), 0 4px 12px -2px rgb(0 0 0 / 0.32); --shadow-popover: var(--shadow-md), 0 0 0 1px var(--border-default); /* ─── Motion ──────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-emphasis: cubic-bezier(0.2, 0, 0, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 280ms; /* ─── Focus ring — visible 2px accent outline (spec) ──────────── */ --ring-offset: var(--bg-0); --ring: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--accent); --ring-inset: inset 0 0 0 2px var(--accent); /* ─── Map height (overridable by the resize handle / localStorage) */ --map-h: clamp(480px, 50vh, 60vh); /* Compatibility aliases — every existing call-site keeps working. These reference the raw --ctp-* palette so they don't create equal-specificity cycles against themes.css. */ --bg: var(--ctp-base); --bg-app: var(--ctp-base); --bg-panel: var(--ctp-mantle); --bg-hover: var(--ctp-surface1); --bg-deeper: var(--ctp-crust); --bg-card: var(--ctp-mantle); --border: var(--ctp-surface1); --border-soft: var(--ctp-surface0); --text: var(--ctp-text); --text-primary: var(--ctp-text); --text-secondary: var(--ctp-subtext1); --text-muted: var(--ctp-overlay1); --text-tertiary:var(--ctp-overlay0); --text-disabled:var(--ctp-overlay0); --text-inverse: var(--ctp-crust); --text-dim: var(--ctp-overlay1); --accent-dim: var(--accent-active); --sans: var(--font-sans); --mono: var(--font-mono); --sev-critical: var(--severity-critical); --sev-high: var(--severity-high); --sev-med: var(--severity-medium); --sev-low: var(--severity-low); --sev-info: var(--severity-info); /* Category tints — Catppuccin palette mapped to source categories. Sapphire for gov/cert (info), Lavender for vendor (analyst), Peach for IOC feed (medium-severity raw), Mauve for vulnerability (analytic), Green for live, Subtext0 for seed (muted), Maroon for HK regulator (jurisdiction-specific accent). */ --cat-A: var(--ctp-sapphire); /* gov/cert */ --cat-B: var(--ctp-lavender); /* vendor */ --cat-C: var(--ctp-peach); /* ioc feed */ --cat-D: var(--ctp-mauve); /* vulnerability */ --cat-E: var(--ctp-green); /* live */ --cat-F: var(--ctp-subtext0); /* seed (muted) */ --cat-G: var(--ctp-maroon); /* HK regulator */ } /* ─── Global selection colour ─────────────────────────────────── */ ::selection { background: var(--select-bg); color: var(--select-text); } /* ─── Reduced-motion override ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }