/* ───────────────────────────────────────────────────────────── ACIDENIA — design tokens Concept: "The Night Garden". Every Stage is a bioluminescent bloom growing out of a spinning record. Dark, wet, glowing. ───────────────────────────────────────────────────────────── */ :root { /* night */ --void: #040308; --ink-900: #08060f; --ink-800: #0e0b19; --ink-700: #161226; --ink-600: #211a3a; --ink-500: #2f2652; /* light on night */ --text: #f3f1fb; --text-dim: #aaa4c4; --text-mute: #6c668c; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.18); /* the acids */ --acid: #c8ff2d; --sulfur: #f9ff5b; --uv: #8a5cff; --magenta: #ff2e97; --cyan: #4df3ff; --amber: #ffa62b; --danger: #ff4d5e; /* every stage re-tints the whole UI through these two */ --stage: var(--acid); --stage-2: var(--uv); --stage-ink: #0a0f00; /* text on top of --stage */ /* decks */ --deck-a: var(--acid); --deck-b: var(--magenta); /* type */ --font-display: "Unbounded", "Arial Black", system-ui, sans-serif; --font-text: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace; /* petal geometry — the signature asymmetric corner */ --petal-sm: 14px 3px 14px 3px; --petal: 26px 5px 26px 5px; --petal-lg: 44px 8px 44px 8px; --petal-flip: 5px 26px 5px 26px; /* glass over 3D */ --glass: linear-gradient(140deg, rgba(22, 18, 38, 0.72), rgba(8, 6, 15, 0.58)); --glass-blur: 18px; /* motion */ --ease-bloom: cubic-bezier(0.22, 1, 0.36, 1); --ease-snap: cubic-bezier(0.7, 0, 0.2, 1); --t-fast: 160ms; --t-med: 420ms; --t-slow: 900ms; --gutter: clamp(16px, 3vw, 44px); --header-h: 72px; } /* stage palettes — set data-stage on or any subtree */ [data-stage="venom"] { --stage: #c8ff2d; --stage-2: #2dffb3; --stage-ink: #0a0f00; } [data-stage="ultraviolet"] { --stage: #9b6bff; --stage-2: #4df3ff; --stage-ink: #07031a; } [data-stage="solar"] { --stage: #ffa62b; --stage-2: #ff4d2e; --stage-ink: #1a0b00; } [data-stage="glasshouse"] { --stage: #4df3ff; --stage-2: #c8ff2d; --stage-ink: #00151a; } [data-stage="nightshade"] { --stage: #ff2e97; --stage-2: #8a5cff; --stage-ink: #1a0010; } [data-stage="dormant"] { --stage: #7d7a99; --stage-2: #3a3655; --stage-ink: #0a0814; }