/* ================================================================ Catppuccin theme system — four official flavours. Source of palette truth: https://catppuccin.com/palette/ Layer 1: raw palette tokens (--ctp-*) per flavour, scoped to :root[data-theme="..."]. Mocha is the implicit default via :root. Layer 2: semantic tokens (--bg-app, --text-primary, --severity-*) defined ONCE on :root, pointing at the raw tokens. They stay flavour-agnostic: switching `data-theme` on re-binds the raw palette and every semantic token follows. Tokyo Night was previously hard-coded across the codebase. After this refactor, every UI surface that previously used a TN hex literal must consume a semantic token (--bg-*, --text-*, --accent-*, --severity-*, --status-*, --chart-*) instead. NO hand-picked approximations. NO transitional fallbacks. Catppuccin only. ================================================================ */ /* ───────────────────────────────────────────────────────────────── FLAVOUR 1 — Mocha (default dark) ───────────────────────────────────────────────────────────────── */ :root, :root[data-theme="mocha"] { --ctp-rosewater: #f5e0dc; --ctp-flamingo: #f2cdcd; --ctp-pink: #f5c2e7; --ctp-mauve: #cba6f7; --ctp-red: #f38ba8; --ctp-maroon: #eba0ac; --ctp-peach: #fab387; --ctp-yellow: #f9e2af; --ctp-green: #a6e3a1; --ctp-teal: #94e2d5; --ctp-sky: #89dceb; --ctp-sapphire: #74c7ec; --ctp-blue: #89b4fa; --ctp-lavender: #b4befe; --ctp-text: #cdd6f4; --ctp-subtext1: #bac2de; --ctp-subtext0: #a6adc8; --ctp-overlay2: #9399b2; --ctp-overlay1: #7f849c; --ctp-overlay0: #6c7086; --ctp-surface2: #585b70; --ctp-surface1: #45475a; --ctp-surface0: #313244; --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b; } /* ───────────────────────────────────────────────────────────────── FLAVOUR 2 — Macchiato (medium dark) ───────────────────────────────────────────────────────────────── */ :root[data-theme="macchiato"] { --ctp-rosewater: #f4dbd6; --ctp-flamingo: #f0c6c6; --ctp-pink: #f5bde6; --ctp-mauve: #c6a0f6; --ctp-red: #ed8796; --ctp-maroon: #ee99a0; --ctp-peach: #f5a97f; --ctp-yellow: #eed49f; --ctp-green: #a6da95; --ctp-teal: #8bd5ca; --ctp-sky: #91d7e3; --ctp-sapphire: #7dc4e4; --ctp-blue: #8aadf4; --ctp-lavender: #b7bdf8; --ctp-text: #cad3f5; --ctp-subtext1: #b8c0e0; --ctp-subtext0: #a5adcb; --ctp-overlay2: #939ab7; --ctp-overlay1: #8087a2; --ctp-overlay0: #6e738d; --ctp-surface2: #5b6078; --ctp-surface1: #494d64; --ctp-surface0: #363a4f; --ctp-base: #24273a; --ctp-mantle: #1e2030; --ctp-crust: #181926; } /* ───────────────────────────────────────────────────────────────── FLAVOUR 3 — Frappé (warm dark) ───────────────────────────────────────────────────────────────── */ :root[data-theme="frappe"] { --ctp-rosewater: #f2d5cf; --ctp-flamingo: #eebebe; --ctp-pink: #f4b8e4; --ctp-mauve: #ca9ee6; --ctp-red: #e78284; --ctp-maroon: #ea999c; --ctp-peach: #ef9f76; --ctp-yellow: #e5c890; --ctp-green: #a6d189; --ctp-teal: #81c8be; --ctp-sky: #99d1db; --ctp-sapphire: #85c1dc; --ctp-blue: #8caaee; --ctp-lavender: #babbf1; --ctp-text: #c6d0f5; --ctp-subtext1: #b5bfe2; --ctp-subtext0: #a5adce; --ctp-overlay2: #949cbb; --ctp-overlay1: #838ba7; --ctp-overlay0: #737994; --ctp-surface2: #626880; --ctp-surface1: #51576d; --ctp-surface0: #414559; --ctp-base: #303446; --ctp-mantle: #292c3c; --ctp-crust: #232634; } /* ───────────────────────────────────────────────────────────────── FLAVOUR 4 — Latte (light) ───────────────────────────────────────────────────────────────── */ :root[data-theme="latte"] { --ctp-rosewater: #dc8a78; --ctp-flamingo: #dd7878; --ctp-pink: #ea76cb; --ctp-mauve: #8839ef; --ctp-red: #d20f39; --ctp-maroon: #e64553; --ctp-peach: #fe640b; --ctp-yellow: #df8e1d; --ctp-green: #40a02b; --ctp-teal: #179299; --ctp-sky: #04a5e5; --ctp-sapphire: #209fb5; --ctp-blue: #1e66f5; --ctp-lavender: #7287fd; --ctp-text: #4c4f69; --ctp-subtext1: #5c5f77; --ctp-subtext0: #6c6f85; --ctp-overlay2: #7c7f93; --ctp-overlay1: #8c8fa1; --ctp-overlay0: #9ca0b0; --ctp-surface2: #acb0be; --ctp-surface1: #bcc0cc; --ctp-surface0: #ccd0da; --ctp-base: #eff1f5; --ctp-mantle: #e6e9ef; --ctp-crust: #dce0e8; } /* ───────────────────────────────────────────────────────────────── SEMANTIC TOKEN LAYER — defined once on :root, references the raw --ctp-* tokens above. Switching data-theme rebinds the raw palette and every semantic token follows automatically. This is the public API. Application code should consume these, never the raw --ctp-* (the raw layer is a palette, not a contract). ───────────────────────────────────────────────────────────────── */ :root { /* Surfaces — Mocha mapping per spec */ --bg-app: var(--ctp-base); /* canvas */ --bg-panel: var(--ctp-mantle); /* sidebar / right rail */ --bg-elevated: var(--ctp-surface0); /* cards / tiles */ --bg-hover: var(--ctp-surface1); --bg-inset: var(--ctp-crust); /* code blocks / inputs */ --bg-deeper: var(--ctp-crust); /* Borders */ --border-subtle: var(--ctp-surface0); --border-default: var(--ctp-surface1); --border-strong: var(--ctp-surface2); /* Text */ --text-primary: var(--ctp-text); /* primary readable */ --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); /* for badges with bright bg */ /* Accents */ --accent-primary: var(--ctp-mauve); --accent-secondary: var(--ctp-lavender); --accent-tertiary: var(--ctp-sapphire); /* Severity ramp — loud and explicit (this is the part that matters most for a threat-intel tool). */ --severity-critical: var(--ctp-red); --severity-high: var(--ctp-maroon); --severity-medium: var(--ctp-peach); --severity-low: var(--ctp-yellow); --severity-info: var(--ctp-sapphire); /* Status */ --status-live: var(--ctp-green); --status-paused: var(--ctp-yellow); --status-stale: var(--ctp-overlay0); --status-error: var(--ctp-red); /* Stream legend — map markers + recent-events panel */ --stream-ioc: var(--ctp-sapphire); --stream-cert: var(--ctp-peach); --stream-actor: var(--ctp-mauve); --stream-live: var(--ctp-green); --stream-vendor: var(--ctp-lavender); /* Charts */ --chart-grid: color-mix(in srgb, var(--ctp-surface0) 60%, transparent); --chart-axis: var(--ctp-subtext0); --chart-bar: color-mix(in srgb, var(--ctp-lavender) 70%, transparent); --chart-bar-peak: var(--ctp-mauve); /* Map */ --map-ocean: var(--ctp-base); --map-land: var(--ctp-surface0); --map-border: var(--ctp-surface1); --map-border-hover:var(--ctp-surface2); --map-label: var(--ctp-subtext1); --map-pin-glow: var(--ctp-sapphire); /* Selection */ --select-bg: color-mix(in srgb, var(--ctp-mauve) 25%, transparent); --select-text: var(--ctp-text); /* Focus ring — accent at 2px, inset for visibility on tiles */ --ring-offset: var(--ctp-base); --ring: 0 0 0 2px var(--ring-offset), 0 0 0 4px var(--accent-primary); --ring-inset: inset 0 0 0 2px var(--accent-primary); } /* ───────────────────────────────────────────────────────────────── LATTE-SPECIFIC SEMANTIC OVERRIDES — light theme inverts a few relationships (text-inverse swaps with text-primary so badges that use Crust as text on a bright background still look right). ───────────────────────────────────────────────────────────────── */ :root[data-theme="latte"] { --text-inverse: var(--ctp-base); /* In light themes, a "muted" text on a light bg needs more contrast than Overlay1 gives. Use Overlay2 instead to pass WCAG AA. */ --text-muted: var(--ctp-overlay2); } /* ───────────────────────────────────────────────────────────────── GLOBAL SELECTION STYLING — uses the new accent. ───────────────────────────────────────────────────────────────── */ ::selection { background: var(--select-bg); color: var(--select-text); }