/* ────────────────────────────────────────────────────────────────── tofig.aca.so — token layer The page is a Figma canvas at night. Designs are the light rectangles floating on it. Violet is structure — nodes, bounds, measurement. Amber is the honest limit — what does not survive. Hues are OKLCH. Violet is anchored to acaso's #745FF3, which resolves to oklch(0.588 0.212 284); the whole ramp and every tinted neutral rides that same 284–288 band, so nothing on the page is an untinted grey. ────────────────────────────────────────────────────────────────── */ :root { color-scheme: dark; /* ═══ Ground — the canvas ═══════════════════════════════════════ */ --void: oklch(0.135 0.018 288); /* page ground */ --canvas: oklch(0.190 0.024 288); /* raised bands */ --surface: oklch(0.225 0.026 288); /* panels, chrome */ --surface-2: oklch(0.272 0.028 288); /* hovered chrome */ --line: oklch(0.310 0.028 288); /* hairline */ --line-2: oklch(0.395 0.032 288); /* emphasised rule */ --dot: oklch(0.375 0.042 288); /* canvas grid */ /* ═══ Ink — on the canvas ═══════════════════════════════════════ Measured against --void: ink 17.9:1 · ink-2 9.6:1 · ink-3 6.0:1 · ink-4 5.0:1 — all four clear AA for body copy. On the lighter --canvas and --surface grounds only ink..ink-3 are safe, so --ink-4 is never used inside a panel. --ink-faint is decoration and is never used for text at all. */ --ink: oklch(0.975 0.004 288); --ink-2: oklch(0.815 0.012 288); --ink-3: oklch(0.655 0.016 288); --ink-4: oklch(0.605 0.018 288); --ink-faint: oklch(0.420 0.020 288); /* ═══ Component grounds ═════════════════════════════════════════ The grounds below the page plane. A code block, a terminal and the little canvases inside the destination cards all sit *under* --void rather than on it, and the nav wash sits level with it. They are tokens rather than literals because a page may move its whole neutral ramp to another hue — /claude.html rides clay's 44 instead of violet's 288 — and a component that hardcodes one hue turns into a cold rectangle on a warm page. Every sunken surface takes its ground from here; only the accent painted on top of it carries meaning. Tint intensity is matched across hues by channel spread, not by chroma: at these lightnesses a warm hue needs roughly two thirds of violet's chroma to read as equally tinted. */ --sunken: oklch(0.105 0.016 288); /* code, terminal, prompt */ --sunken-bar: oklch(0.145 0.018 288); /* their title bars */ --stage: oklch(0.115 0.018 288); /* the small canvases */ --scrim: oklch(0.135 0.018 288); /* nav wash, page ground */ /* ═══ Violet — structure, nodes, measurement ════════════════════ */ --v-200: oklch(0.900 0.060 284); --v-300: oklch(0.795 0.115 284); --v-400: oklch(0.700 0.160 284); --v-500: oklch(0.588 0.212 284); /* acaso #745FF3 */ --v-600: oklch(0.535 0.225 284); --v-700: oklch(0.460 0.200 284); --v-ghost: oklch(0.588 0.212 284 / 0.14); --v-edge: oklch(0.588 0.212 284 / 0.34); /* The acaso symbol ships filled at this value. Mark only. */ --mark: #6C03FA; /* ═══ Clay — the Claude side of the journey ═════════════════════ Claude's warm terracotta, #D97757. The site's rule is that colour carries meaning: violet is the tofig/Figma side, clay is the Claude side, and the handoff is where they meet. --c-500 on --void measures 5.2:1, so it is safe for body text. */ --c-300: oklch(0.780 0.105 42); --c-400: oklch(0.720 0.120 41); --c-500: oklch(0.665 0.125 40); /* #D97757 */ --c-600: oklch(0.600 0.130 38); --c-700: oklch(0.545 0.135 37); /* interactive fill: white on c-600 measures 4.17:1, under the floor */ --c-ghost: oklch(0.665 0.125 40 / 0.12); --c-edge: oklch(0.665 0.125 40 / 0.34); /* ═══ Amber — what does not survive ═════════════════════════════ */ --a-300: oklch(0.870 0.115 82); --a-400: oklch(0.805 0.145 76); --a-600: oklch(0.620 0.130 70); --a-ghost: oklch(0.805 0.145 76 / 0.12); /* ═══ Paper — designs sitting on the canvas ═════════════════════ */ --paper: oklch(0.995 0 0); --paper-2: oklch(0.968 0.002 288); --paper-line: oklch(0.905 0.004 288); --paper-ink: oklch(0.220 0.012 288); --paper-ink-2:oklch(0.455 0.012 288); /* ═══ Type ══════════════════════════════════════════════════════ Sora carries the voice from 100 to 700 — the wordmark's own device (`to` thin against a heavier `fig`) scaled to the page. Azeret Mono is the instrument voice: node names, dimensions, counters, code. Never used for prose. */ --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --tracking: -0.030em; --tracking-tight:-0.042em; --tracking-mono: 0.005em; --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 21px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; /* ═══ Spacing — 4px grid ════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10:64px; --space-11:80px; --space-12:112px; --space-13:160px; --space-14:224px; /* ═══ Radius ════════════════════════════════════════════════════ */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill:64px; --radius-full:9999px; /* ═══ Elevation ═════════════════════════════════════════════════ On a dark ground, elevation reads as lift plus a violet bloom — the way a selected object glows on a Figma canvas. */ --lift-1: 0 1px 2px oklch(0 0 0 / 0.4); --lift-2: 0 8px 24px -8px oklch(0 0 0 / 0.55); --lift-3: 0 28px 64px -24px oklch(0 0 0 / 0.7); --bloom: 0 0 0 1px var(--v-edge), 0 12px 48px -12px oklch(0.588 0.212 284 / 0.4); --bloom-strong: 0 0 0 1px oklch(0.588 0.212 284 / 0.55), 0 0 32px -4px oklch(0.588 0.212 284 / 0.45), 0 24px 64px -16px oklch(0 0 0 / 0.6); /* ═══ Motion ════════════════════════════════════════════════════ Cinematic on the one signature moment; crisp everywhere else. Exits run at ~65% of their entrance, per the standard. */ --e-out: cubic-bezier(0.16, 1, 0.30, 1); /* expo-out */ --e-out-q: cubic-bezier(0.22, 1, 0.36, 1); /* quart-out */ --e-in-out: cubic-bezier(0.76, 0, 0.24, 1); --e-glide: cubic-bezier(0.33, 0.02, 0, 1); --t-tap: 120ms; --t-fast: 200ms; --t-mid: 320ms; --t-slow: 560ms; --t-reveal:900ms; --t-cine: 1400ms; /* ═══ Layout ════════════════════════════════════════════════════ */ --content: 1240px; --wide: 1560px; --measure: 36rem; /* ~70 characters of Sora at 16px */ --nav-h: 64px; /* ═══ z-index — semantic ════════════════════════════════════════ */ --z-canvas: 0; --z-raised: 10; --z-xray: 60; /* the inspection overlay */ --z-panel: 80; /* the layers panel */ --z-sticky: 100; --z-overlay:200; --z-toast: 300; } /* Reduced motion collapses choreography to a crossfade. The signature explode becomes a static exploded diagram — the information survives, the movement does not. */ @media (prefers-reduced-motion: reduce) { :root { --t-tap: 0ms; --t-fast: 0ms; --t-mid: 0ms; --t-slow: 1ms; --t-reveal: 1ms; --t-cine: 1ms; } }