/* =========================================================================== PicoFlow design tokens PicoFlow's documentation uses the same yellow + charcoal brand system as the marketing site, with warm gray neutrals for long-form reading. Light/dark switching uses the same space-toggle trick as the tutorial: `--light` and `--dark` are each either `initial` (guaranteed-invalid, so `var()` falls back to the literal) or the empty string (so `var()` resolves to nothing). Exactly one literal survives in the final value. This is why the site needs no JavaScript to support dark mode. ========================================================================== */ :root { color-scheme: light; --light: initial; --dark: ; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --light: ; --dark: initial; } } :root { /* ------------------------------------------------------------ surfaces */ --color-backdrop: var(--light, rgba(0, 0, 0, 0.25)) var(--dark, rgba(0, 0, 0, 0.5)); --color-background: var(--light, #f3f1ec) var(--dark, #171717); --color-surface: var(--light, #faf9f6) var(--dark, #171717); /* ------------------------------------------- primary (PicoFlow gold) */ --color-primary-mark: var(--light, #f6bd4a44) var(--dark, #f6bd4a55); --color-primary-bg-subtle: var(--light, #fbf7eb) var(--dark, #242424); --color-primary-bg: var(--light, #f7e9bd) var(--dark, #453718); --color-primary-bg-hover: var(--light, #f4df9f) var(--dark, #5a4613); --color-primary-bg-active: var(--light, #edcf72) var(--dark, #6d5211); --color-primary-line-weak: var(--light, #edcf72) var(--dark, #6d5211); --color-primary-line: var(--light, #ddc36c) var(--dark, #8c6b1d); --color-primary-border: var(--light, #cdb157) var(--dark, #aa8428); --color-primary-border-hover: var(--light, #b99328) var(--dark, #d0aa45); --color-primary-focus-ring: var(--light, #b99328) var(--dark, #d0aa45); --color-primary-bg-solid: var(--light, #f6bd4a) var(--dark, #f6bd4a); --color-primary-bg-solid-hover: var(--light, #ffd86c) var(--dark, #ffd86c); --color-primary-text: var(--light, #8a6212) var(--dark, #ffd86c); --color-primary-text-contrast: var(--light, #3f2b05) var(--dark, #f8e3a5); --color-primary-placeholder: var(--light, #b9922c) var(--dark, #d7b34c); /* --------------------------------------- neutral (Radix slate scale) */ --color-neutral-bg-subtle: var(--light, #f9f9fb) var(--dark, #18191b); --color-neutral-bg: var(--light, #f0f0f3) var(--dark, #212225); --color-neutral-bg-hover: var(--light, #e8e8ec) var(--dark, #272a2d); --color-neutral-bg-active: var(--light, #e0e1e6) var(--dark, #2e3135); --color-neutral-line-weak: var(--light, #e0e1e6) var(--dark, #2e3135); --color-neutral-line: var(--light, #d9d9e0) var(--dark, #363a3f); --color-neutral-border: var(--light, #cdced6) var(--dark, #43484e); --color-neutral-border-hover: var(--light, #b9bbc6) var(--dark, #5a6169); --color-neutral-focus-ring: var(--light, #b9bbc6) var(--dark, #5a6169); --color-neutral-bg-solid: var(--light, #8b8d98) var(--dark, #696e77); --color-neutral-bg-solid-hover: var(--light, #80838d) var(--dark, #777b84); --color-neutral-text: var(--light, #60646c) var(--dark, #b0b4ba); --color-neutral-text-contrast: var(--light, #1c2024) var(--dark, #edeef0); --color-neutral-placeholder: var(--light, #8b8d98) var(--dark, #696e77); /* ------------------------------------------------------------ code theme */ --color-code-keyword: #ff9ec4; --color-code-function: #d3b0ff; --color-code-type: #7dd3fc; --color-code-string: #9ee6b8; --color-code-number: #f5c988; --color-code-comment: #7286a0; --color-code-punctuation: #a9b8c7; /* ------------------------------------------------- callouts / admonitions */ --callout-blue-text: var(--light, #5f5f5f) var(--dark, #d0cbc2); --callout-blue-bg: var(--light, #f0ede6) var(--dark, #292929); --callout-accent-text: var(--light, #8a6212) var(--dark, #ffd86c); --callout-accent-bg: var(--light, #fbf7eb) var(--dark, #332a18); --callout-tip-text: var(--light, #72510f) var(--dark, #ffd86c); --callout-tip-bg: var(--light, #f7e9bd) var(--dark, #453718); --callout-orange-text: var(--light, #cc4e00) var(--dark, #ffa057); --callout-orange-bg: var(--light, #ff9c0029) var(--dark, #fb6a0025); --callout-red-text: var(--light, #c40006d3) var(--dark, #ff9592); --callout-red-bg: var(--light, #f3000d14) var(--dark, #ff173f2d); --callout-purple-text: var(--light, #52009aba) var(--dark, #d19dff); --callout-purple-bg: var(--light, #8e00f112) var(--dark, #c150ff2d); --callout-gray-text: var(--light, #0000009b) var(--dark, #ffffffaf); --callout-gray-bg: var(--light, #00000006) var(--dark, #ffffff09); /* ------------------------------------------------------------- brand */ --color-brand: var(--light, #f6bd4a) var(--dark, #f6bd4a); --color-brand-text: var(--light, #8a6212) var(--dark, #ffd86c); /* ------------------------------------------------------------ typography */ --font-family-default: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-family-brand: "Dancing Script", cursive; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-fluid-x2: clamp(0.79rem, calc(0.76rem + 0.17vw), 0.89rem); --font-size-fluid-x1: clamp(0.89rem, calc(0.85rem + 0.19vw), 1rem); --font-size-fluid-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem); --font-size-fluid-1: clamp(1.13rem, calc(1.08rem + 0.24vw), 1.27rem); --font-size-fluid-2: clamp(1.27rem, calc(1.21rem + 0.28vw), 1.42rem); --font-size-fluid-3: clamp(1.42rem, calc(1.36rem + 0.31vw), 1.6rem); --font-size-fluid-4: clamp(1.6rem, calc(1.53rem + 0.35vw), 1.8rem); --font-size-fluid-5: clamp(1.8rem, calc(1.72rem + 0.39vw), 2.03rem); --font-size-fluid-6: clamp(2.03rem, calc(1.94rem + 0.44vw), 2.28rem); --font-size-fluid-7: clamp(2.28rem, calc(2.18rem + 0.5vw), 2.57rem); --font-size-fluid-8: clamp(2.57rem, calc(2.45rem + 0.56vw), 2.89rem); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* ---------------------------------------------------------- geometry */ --rounded-sm: 2px; --rounded-md: 4px; --rounded-lg: 8px; --rounded-full: 9999px; --shadow-xs: 0 1px 3px rgba(100, 100, 100, 0.09); --shadow-sm: 0 1px 5px rgba(100, 100, 100, 0.05); --shadow-md: 0 0 0 1px var(--color-neutral-border), 0 1px 5px rgba(100, 100, 100, 0.05), 0 0 40px rgba(100, 100, 100, 0.015); --shadow-lg: 0 0 0 1px var(--color-neutral-border), 0 5px 17px rgba(100, 100, 100, 0.14); --shadow-xl: 0 4px 12px rgba(100, 100, 100, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 36px; --space-7: 48px; --space-8: 64px; /* ------------------------------------------------------------- layout */ --header-height: 56px; --tabs-height: 44px; --chrome-height: calc(var(--header-height) + var(--tabs-height)); --sidebar-width: 296px; --toc-width: 232px; --content-max: 768px; }