/* Customization Plus playground theme. Ported from the provided Tailwind v4 token set to plain CSS custom properties. Dark is the default; .light on flips to the light token set. */ :root, .dark { --background:#000000; --foreground:#f0f0f0; --card:#0a0a0a; --card-foreground:#f0f0f0; --popover:#1a1b1b; --popover-foreground:#f0f0f0; --primary:#51f0a8; --primary-foreground:#000000; --secondary:#216a49; --secondary-foreground:#f0f0f0; --muted:#252527; --muted-foreground:#969696; --accent:#093723; --accent-foreground:#fefefe; --destructive:#ff78a5; --destructive-foreground:#ffffff; --border:#19191a; --input:#3b3b3b; --ring:#51f0a8; --chart-1:#51f0a8; --chart-2:#9effa1; --chart-3:#ffb7cf; --chart-4:#5fd0ff; --chart-5:#ffb188; --sidebar:#0a0a0a; --sidebar-border:#353a3e; --font-sans:"Plus Jakarta Sans",sans-serif; --font-serif:"Lora",serif; --font-mono:"IBM Plex Mono",monospace; --radius:1.4rem; /* semantic roles used by the state-machine renderer */ --st-active:var(--primary); --st-idle:#3a3a3d; --st-ok:var(--chart-2); --st-fail:var(--destructive); --st-signal:var(--chart-4); --st-reset:var(--chart-5); --st-dead:#4a4a4d; --glow:rgba(81,240,168,.45); } .light { --background:#fdfdfd; --foreground:#000000; --card:#fdfdfd; --card-foreground:#000000; --popover:#fcfcfc; --popover-foreground:#000000; --primary:#51f0a8; --primary-foreground:#000000; --secondary:#fcfdfd; --secondary-foreground:#080808; --muted:#f5f5f5; --muted-foreground:#525252; --accent:#f9fffc; --accent-foreground:#0d9f5d; --destructive:#f54a88; --destructive-foreground:#ffffff; --border:#f4f6f8; --input:#ebebeb; --ring:#51f0a8; --chart-1:#51f0a8; --chart-2:#7efe8f; --chart-3:#ff4838; --chart-4:#2ebdf6; --chart-5:#ffb188; --sidebar:#ffffff; --sidebar-border:#ebebeb; --st-active:#0d9f5d; --st-idle:#c9cdd2; --st-ok:#1aa64b; --st-fail:var(--destructive); --st-signal:#2ebdf6; --st-reset:#e2872f; --st-dead:#aab0b6; --glow:rgba(13,159,93,.30); }