/* MultiTool design tokens · v1.1 Source of truth for color, type, space, shape, motion. Canonical color space: OKLCH. Two themes: light (default) and dark. Theme switch: ; without the attribute, prefers-color-scheme decides. */ :root { color-scheme: light; /* ── Brand greens (pump.fun pill) · same in both themes ────── */ --g-50: oklch(0.975 0.018 160); --g-100: oklch(0.945 0.040 160); --g-200: oklch(0.900 0.075 160); --g-300: oklch(0.850 0.110 158); --g-400: oklch(0.805 0.140 157); --g-500: oklch(0.780 0.150 157); /* pill green #54d491 */ --g-600: oklch(0.700 0.140 159); --g-700: oklch(0.560 0.100 165); --g-800: oklch(0.440 0.070 175); --g-900: oklch(0.340 0.050 183); /* pill outline #13403a */ --g-950: oklch(0.240 0.035 185); /* ── Surfaces & text (theme) ───────────────────────────────── */ --paper: oklch(0.990 0.005 165); --paper-2: oklch(0.972 0.008 165); --paper-3: oklch(0.945 0.012 168); --paper-4: oklch(0.910 0.015 170); --line: oklch(0.885 0.018 170); --line-2: oklch(0.800 0.025 172); --ink: oklch(0.230 0.030 180); --ink-2: oklch(0.420 0.030 178); --ink-3: oklch(0.560 0.025 176); --ink-4: oklch(0.700 0.020 174); --outline: var(--g-900); /* capsule outline */ --accent-text: var(--g-700); /* links, wordmark accent */ /* glass material */ --glass: oklch(1 0 0 / 0.58); --glass-strong: oklch(1 0 0 / 0.78); --glass-border: oklch(0.62 0.10 165 / 0.38); --glass-hi: oklch(1 0 0 / 0.85); --glass-blur: 18px; --glow: 0 0 28px -6px oklch(0.78 0.15 157 / 0.45); --aurora-a: 0.55; /* background aurora strength */ --grid-line: oklch(0.30 0.04 180 / 0.05); /* ── Tools (theme-aware roles: ink/soft/glow flip in dark) ──── */ --burn: oklch(0.680 0.210 35); --burn-deep: oklch(0.600 0.200 32); --burn-ink: oklch(0.420 0.150 30); --burn-soft: oklch(0.955 0.035 50); --burn-glow: oklch(0.860 0.170 85); --burn-on: oklch(0.99 0.01 60); --water: oklch(0.660 0.150 235); --water-deep: oklch(0.580 0.150 240); --water-ink: oklch(0.400 0.110 245); --water-soft: oklch(0.955 0.030 225); --water-glow: oklch(0.870 0.090 210); --water-on: oklch(0.99 0.01 220); --stocks: oklch(0.600 0.150 152); /* market green (deeper than the pill) */ --stocks-deep: oklch(0.520 0.140 153); --stocks-ink: oklch(0.400 0.110 155); --stocks-soft: oklch(0.955 0.040 150); --stocks-glow: oklch(0.860 0.150 148); --stocks-on: oklch(0.99 0.01 150); --amber: oklch(0.800 0.160 82); /* warnings only */ --amber-ink: oklch(0.480 0.110 70); --amber-soft: oklch(0.965 0.040 90); --holders: oklch(0.600 0.220 297); --holders-deep: oklch(0.530 0.220 296); --holders-ink: oklch(0.400 0.170 295); --holders-soft: oklch(0.955 0.030 300); --holders-glow: oklch(0.800 0.120 300); --holders-on: oklch(0.99 0.01 300); --rwa: oklch(0.740 0.150 82); /* bullion gold */ --rwa-deep: oklch(0.650 0.150 78); --rwa-ink: oklch(0.440 0.105 68); --rwa-soft: oklch(0.960 0.040 90); --rwa-glow: oklch(0.900 0.130 95); --rwa-on: oklch(0.20 0.04 70); --crypto: oklch(0.740 0.165 58); /* bitcoin orange */ --crypto-deep: oklch(0.650 0.165 52); --crypto-ink: oklch(0.450 0.125 48); --crypto-soft: oklch(0.960 0.035 72); --crypto-glow: oklch(0.880 0.140 72); --crypto-on: oklch(0.20 0.04 50); --long: oklch(0.640 0.200 315); /* hylo violet */ --long-deep: oklch(0.560 0.200 312); --long-ink: oklch(0.440 0.160 312); --long-soft: oklch(0.955 0.035 315); --long-glow: oklch(0.850 0.140 315); --long-on: oklch(0.985 0.01 315); --memes: oklch(0.660 0.230 350); /* pump pink */ --memes-deep: oklch(0.590 0.230 348); --memes-ink: oklch(0.440 0.170 350); --memes-soft: oklch(0.960 0.030 350); --memes-glow: oklch(0.850 0.130 345); --memes-on: oklch(0.99 0.01 350); --lottery: oklch(0.700 0.130 195); /* lottery teal */ --lottery-deep: oklch(0.620 0.130 197); --lottery-ink: oklch(0.400 0.100 200); --lottery-soft: oklch(0.955 0.035 195); --lottery-glow: oklch(0.870 0.110 190); --lottery-on: oklch(0.99 0.01 200); /* brand as a "tool" (default scope) */ --brand-ink: var(--g-900); --brand-soft: var(--g-100); --brand-glow: var(--g-300); --tool: var(--g-500); --tool-deep: var(--g-600); --tool-ink: var(--brand-ink); --tool-soft: var(--brand-soft); --tool-glow: var(--brand-glow); --tool-on: var(--g-950); /* ── Semantic (reuse tool hues on purpose) ─────────────────── */ --ok: var(--g-500); --ok-ink: var(--brand-ink); --ok-soft: var(--brand-soft); --warn: var(--amber); --warn-ink: var(--amber-ink); --warn-soft: var(--amber-soft); --danger: var(--burn); --danger-ink: var(--burn-ink); --danger-soft: var(--burn-soft); --info: var(--water); --info-ink: var(--water-ink); --info-soft: var(--water-soft); /* ── Type ──────────────────────────────────────────────────── */ --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --t-12: 0.75rem; --t-13: 0.8125rem; --t-15: 0.9375rem; --t-18: 1.125rem; --t-22: 1.375rem; --t-26: 1.625rem; --t-32: 2rem; --t-40: 2.5rem; --t-display: clamp(2.75rem, 8vw, 7rem); --t-headline: clamp(1.75rem, 3.2vw, 2.75rem); --t-lead: clamp(1.0625rem, 1.4vw, 1.25rem); --wdth-display: 118; --wdth-ui: 100; --wdth-mono: 87.5; /* ── Space ─────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px; /* ── Shape ─────────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --bw: 1.5px; /* ── Elevation ─────────────────────────────────────────────── */ --gloss: inset 0 1px 0 oklch(1 0 0 / 0.55), inset 0 -1px 0 oklch(0.3 0.04 180 / 0.06); --gloss-off: inset 0 1px 0 oklch(1 0 0 / 0), inset 0 -1px 0 oklch(0.3 0.04 180 / 0); --sh-1: 0 1px 2px oklch(0.3 0.04 180 / 0.10), 0 4px 12px -4px oklch(0.3 0.04 180 / 0.10); --sh-2: 0 2px 4px -1px oklch(0.3 0.04 180 / 0.08), 0 16px 40px -16px oklch(0.3 0.05 180 / 0.22); --ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--g-500); --ring-field: 0 0 0 3px color-mix(in oklch, var(--g-500) 32%, transparent); /* text fields: one soft halo hugging the border (the offset ring read as a doubled outline) */ --ring-field-danger: 0 0 0 3px color-mix(in oklch, var(--burn) 32%, transparent); /* ── Motion ────────────────────────────────────────────────── */ --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 480ms; --d-5: 720ms; --e-out: cubic-bezier(0.25, 1, 0.5, 1); --e-out-5: cubic-bezier(0.22, 1, 0.36, 1); --e-out-x: cubic-bezier(0.16, 1, 0.3, 1); --e-in: cubic-bezier(0.7, 0, 0.84, 0); --e-io: cubic-bezier(0.65, 0, 0.35, 1); /* ── Layout ────────────────────────────────────────────────── */ --container: 1720px; --container-narrow: 760px; --gutter: clamp(16px, 3vw, 56px); } /* ── Dark theme ───────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: oklch(0.165 0.018 190); --paper-2: oklch(0.200 0.020 188); --paper-3: oklch(0.240 0.022 186); --paper-4: oklch(0.290 0.024 184); --line: oklch(0.300 0.030 182); --line-2: oklch(0.380 0.035 180); --ink: oklch(0.955 0.010 165); --ink-2: oklch(0.800 0.020 168); --ink-3: oklch(0.650 0.025 170); --ink-4: oklch(0.500 0.025 172); --outline: oklch(0.86 0.12 158); --accent-text: var(--g-400); --glass: oklch(0.22 0.025 185 / 0.55); --glass-strong: oklch(0.22 0.025 185 / 0.80); --glass-border: oklch(0.78 0.13 158 / 0.32); --glass-hi: oklch(1 0 0 / 0.10); --glow: 0 0 36px -6px oklch(0.78 0.15 157 / 0.55); --aurora-a: 0.9; --grid-line: oklch(0.9 0.05 160 / 0.045); --burn-ink: oklch(0.86 0.12 50); --burn-soft: oklch(0.27 0.07 35); --burn-glow: oklch(0.80 0.17 70); --water-ink: oklch(0.86 0.08 220); --water-soft: oklch(0.26 0.06 235); --water-glow: oklch(0.80 0.10 215); --stocks-ink: oklch(0.86 0.13 150); --stocks-soft: oklch(0.25 0.06 152); --stocks-glow: oklch(0.84 0.16 148); --amber-ink: oklch(0.90 0.12 90); --amber-soft: oklch(0.28 0.07 82); --holders-ink: oklch(0.86 0.10 300); --holders-soft: oklch(0.27 0.08 297); --holders-glow: oklch(0.78 0.14 300); --rwa-ink: oklch(0.88 0.12 88); --rwa-soft: oklch(0.27 0.06 80); --rwa-glow: oklch(0.86 0.14 92); --rwa-on: oklch(0.20 0.04 70); --crypto-ink: oklch(0.86 0.14 62); --crypto-soft: oklch(0.28 0.06 58); --crypto-glow: oklch(0.84 0.16 66); --crypto-on: oklch(0.20 0.04 50); --long-ink: oklch(0.84 0.14 315); --long-soft: oklch(0.30 0.07 313); --long-glow: oklch(0.80 0.16 315); --long-on: oklch(0.985 0.01 315); --memes-ink: oklch(0.86 0.11 350); --memes-soft: oklch(0.27 0.08 350); --memes-glow: oklch(0.80 0.16 348); --lottery-ink: oklch(0.86 0.10 195); --lottery-soft: oklch(0.26 0.06 197); --lottery-glow: oklch(0.80 0.12 190); --brand-ink: var(--g-300); --brand-soft: oklch(0.25 0.05 165); --brand-glow: var(--g-400); --gloss: inset 0 1px 0 oklch(1 0 0 / 0.12), inset 0 -1px 0 oklch(0 0 0 / 0.25); --gloss-off: inset 0 1px 0 oklch(1 0 0 / 0), inset 0 -1px 0 oklch(0 0 0 / 0); --sh-1: 0 1px 2px oklch(0 0 0 / 0.35), 0 6px 16px -6px oklch(0 0 0 / 0.5); --sh-2: 0 2px 4px -1px oklch(0 0 0 / 0.35), 0 20px 48px -16px oklch(0 0 0 / 0.6); } } :root[data-theme="dark"] { color-scheme: dark; --paper: oklch(0.165 0.018 190); --paper-2: oklch(0.200 0.020 188); --paper-3: oklch(0.240 0.022 186); --paper-4: oklch(0.290 0.024 184); --line: oklch(0.300 0.030 182); --line-2: oklch(0.380 0.035 180); --ink: oklch(0.955 0.010 165); --ink-2: oklch(0.800 0.020 168); --ink-3: oklch(0.650 0.025 170); --ink-4: oklch(0.500 0.025 172); --outline: oklch(0.86 0.12 158); --accent-text: var(--g-400); --glass: oklch(0.22 0.025 185 / 0.55); --glass-strong: oklch(0.22 0.025 185 / 0.80); --glass-border: oklch(0.78 0.13 158 / 0.32); --glass-hi: oklch(1 0 0 / 0.10); --glow: 0 0 36px -6px oklch(0.78 0.15 157 / 0.55); --aurora-a: 0.9; --grid-line: oklch(0.9 0.05 160 / 0.045); --burn-ink: oklch(0.86 0.12 50); --burn-soft: oklch(0.27 0.07 35); --burn-glow: oklch(0.80 0.17 70); --water-ink: oklch(0.86 0.08 220); --water-soft: oklch(0.26 0.06 235); --water-glow: oklch(0.80 0.10 215); --stocks-ink: oklch(0.86 0.13 150); --stocks-soft: oklch(0.25 0.06 152); --stocks-glow: oklch(0.84 0.16 148); --amber-ink: oklch(0.90 0.12 90); --amber-soft: oklch(0.28 0.07 82); --holders-ink: oklch(0.86 0.10 300); --holders-soft: oklch(0.27 0.08 297); --holders-glow: oklch(0.78 0.14 300); --rwa-ink: oklch(0.88 0.12 88); --rwa-soft: oklch(0.27 0.06 80); --rwa-glow: oklch(0.86 0.14 92); --rwa-on: oklch(0.20 0.04 70); --crypto-ink: oklch(0.86 0.14 62); --crypto-soft: oklch(0.28 0.06 58); --crypto-glow: oklch(0.84 0.16 66); --crypto-on: oklch(0.20 0.04 50); --long-ink: oklch(0.84 0.14 315); --long-soft: oklch(0.30 0.07 313); --long-glow: oklch(0.80 0.16 315); --long-on: oklch(0.985 0.01 315); --memes-ink: oklch(0.86 0.11 350); --memes-soft: oklch(0.27 0.08 350); --memes-glow: oklch(0.80 0.16 348); --lottery-ink: oklch(0.86 0.10 195); --lottery-soft: oklch(0.26 0.06 197); --lottery-glow: oklch(0.80 0.12 190); --brand-ink: var(--g-300); --brand-soft: oklch(0.25 0.05 165); --brand-glow: var(--g-400); --gloss: inset 0 1px 0 oklch(1 0 0 / 0.12), inset 0 -1px 0 oklch(0 0 0 / 0.25); --gloss-off: inset 0 1px 0 oklch(1 0 0 / 0), inset 0 -1px 0 oklch(0 0 0 / 0); --sh-1: 0 1px 2px oklch(0 0 0 / 0.35), 0 6px 16px -6px oklch(0 0 0 / 0.5); --sh-2: 0 2px 4px -1px oklch(0 0 0 / 0.35), 0 20px 48px -16px oklch(0 0 0 / 0.6); } /* ── Tool scopes: set on any ancestor (page, panel, button, scene) ─ */ [data-tool="burn"] { --tool: var(--burn); --tool-deep: var(--burn-deep); --tool-ink: var(--burn-ink); --tool-soft: var(--burn-soft); --tool-glow: var(--burn-glow); --tool-on: var(--burn-on); } [data-tool="liquidity"], [data-tool="water"] { --tool: var(--water); --tool-deep: var(--water-deep); --tool-ink: var(--water-ink); --tool-soft: var(--water-soft); --tool-glow: var(--water-glow); --tool-on: var(--water-on); } [data-tool="stocks"] { --tool: var(--stocks); --tool-deep: var(--stocks-deep); --tool-ink: var(--stocks-ink); --tool-soft: var(--stocks-soft); --tool-glow: var(--stocks-glow); --tool-on: var(--stocks-on); } [data-tool="holders"], [data-tool="airdrop"] { --tool: var(--holders); --tool-deep: var(--holders-deep); --tool-ink: var(--holders-ink); --tool-soft: var(--holders-soft); --tool-glow: var(--holders-glow); --tool-on: var(--holders-on); } [data-tool="rwa"] { --tool: var(--rwa); --tool-deep: var(--rwa-deep); --tool-ink: var(--rwa-ink); --tool-soft: var(--rwa-soft); --tool-glow: var(--rwa-glow); --tool-on: var(--rwa-on); } [data-tool="crypto"] { --tool: var(--crypto); --tool-deep: var(--crypto-deep); --tool-ink: var(--crypto-ink); --tool-soft: var(--crypto-soft); --tool-glow: var(--crypto-glow); --tool-on: var(--crypto-on); } [data-tool="long"] { --tool: var(--long); --tool-deep: var(--long-deep); --tool-ink: var(--long-ink); --tool-soft: var(--long-soft); --tool-glow: var(--long-glow); --tool-on: var(--long-on); } [data-tool="memes"] { --tool: var(--memes); --tool-deep: var(--memes-deep); --tool-ink: var(--memes-ink); --tool-soft: var(--memes-soft); --tool-glow: var(--memes-glow); --tool-on: var(--memes-on); } [data-tool="lottery"] { --tool: var(--lottery); --tool-deep: var(--lottery-deep); --tool-ink: var(--lottery-ink); --tool-soft: var(--lottery-soft); --tool-glow: var(--lottery-glow); --tool-on: var(--lottery-on); } [data-tool="brand"] { --tool: var(--g-500); --tool-deep: var(--g-600); --tool-ink: var(--brand-ink); --tool-soft: var(--brand-soft); --tool-glow: var(--brand-glow); --tool-on: var(--g-950); } /* registered properties for animatable custom props (contour trace, liquid fill) */ @property --mt-a { syntax: ""; inherits: false; initial-value: 0deg; } @property --mt-fill { syntax: ""; inherits: false; initial-value: 0%; } @property --mt-split { syntax: ""; inherits: true; initial-value: 50%; } /* sRGB fallback for engines without OKLCH */ @supports not (color: oklch(0.5 0.1 150)) { :root { --g-500: #54d491; --g-600: #3fb679; --g-900: #13403a; --g-950: #0b2a26; --g-100: #e6f6ee; --g-300: #a8e7c6; --g-400: #7fdcae; --paper: #fbfdfc; --paper-2: #f3f8f6; --paper-3: #e9f1ee; --paper-4: #dfe9e5; --line: #d6e2de; --line-2: #b8c9c3; --ink: #122a27; --ink-2: #3e5a55; --ink-3: #6b837e; --ink-4: #98aaa5; --burn: #ef5a2a; --burn-ink: #8f2a0e; --burn-soft: #fdeee6; --burn-glow: #ffd166; --burn-on: #fff; --burn-deep: #d9481c; --water: #3d8fd6; --water-ink: #1c4f86; --water-soft: #e8f2fc; --water-glow: #bfe3ff; --water-on: #fff; --water-deep: #2e78bd; --stocks: #2e9e63; --stocks-ink: #1f6b45; --stocks-soft: #e6f6ec; --stocks-glow: #8fe3b3; --stocks-on: #fff; --stocks-deep: #24874f; --amber: #f1b934; --amber-ink: #7a5208; --amber-soft: #fdf4dc; --holders: #8a55f2; --holders-ink: #4d2aa0; --holders-soft: #f1ebfd; --holders-glow: #cdb9ff; --holders-on: #fff; --holders-deep: #7743e0; --rwa: #d9a62b; --rwa-ink: #6e4a0a; --rwa-soft: #fbf3dc; --rwa-glow: #f6dc8a; --rwa-on: #2b1d05; --rwa-deep: #bf8e1c; --crypto: #f0973a; --crypto-ink: #7d4a10; --crypto-soft: #fdf1e3; --crypto-glow: #f9cf93; --crypto-on: #2b1a05; --crypto-deep: #d27f22; --long: #a855c8; --long-ink: #6b2f86; --long-soft: #f7ecfb; --long-glow: #e3b7f2; --long-on: #fdf8ff; --long-deep: #8f3fae; --memes: #e84c9b; --memes-ink: #8a1d5e; --memes-soft: #fdeaf3; --memes-glow: #f7b3d4; --memes-on: #fff; --memes-deep: #d03585; --lottery: #3fb8b8; --lottery-ink: #1c5f62; --lottery-soft: #e6f6f5; --lottery-glow: #a8e6e3; --lottery-on: #fff; --lottery-deep: #2f9e9f; } }