/* Semantic aliases over the raw Figma variables in fig-tokens.css. Figma FLOAT variables are unitless - every length below wraps them in calc(x * 1px) so they can be used directly in CSS. Values are verbatim from the .fig. */ :root { /* ── Surfaces & text (Color Scheme 1 is the file's default: slate #6B7784 on white type) */ --surface-page: var(--color-scheme-1-background); /* rgb(107,119,132) */ --surface-page-alt: var(--color-scheme-2-background); /* rgb(233,235,237) */ --surface-card: var(--color-neutral-white); --surface-card-muted: var(--color-neutral-lightest); /* rgb(242,242,242) - app canvas */ --surface-inverse: var(--color-pickled-bluewood-dark); /* rgb(35,49,64) */ --surface-accent: var(--color-mountain-meadow-lightest); /* rgb(232,248,245) */ /* ── The app's four surfaces (no-borders spec). Blocks are separated by a change of tone, never by an outline, so each level of nesting alternates: canvas → card → block → item. Canvas/card/inverse/accent all already existed above as .fig values and are aliased here under the spec's own names so the two systems read as one; --surface-block (#F9F9F9) is the single value the spec adds that the .fig never had, hence the literal. Cards consume these through --card-bg, which .section flips per tone (see css/page.css) - a card doesn't pick its own surface, the ground it lands on decides. */ --surface-canvas: var(--color-neutral-lightest); /* #F2F2F2 */ --surface-block: #F9F9F9; /* not in the .fig */ --text-primary: var(--color-neutral-darkest); /* rgb(12,8,1) */ --text-secondary: var(--opacity-neutral-darkest-60); --text-on-dark: var(--color-neutral-white); --text-on-dark-muted: var(--opacity-white-60); --text-link: var(--link-primary); /* ── Borders Since the no-borders pass these are for the three things that are not "an outline around a block": divider lines between rows in a list or table, form-field underlines, and edges on dark. Nothing else should reach for them - separate blocks with tone instead (see the surfaces above). */ --border-default: var(--opacity-neutral-darkest-15); --border-strong: var(--opacity-neutral-darkest-30); --border-on-dark: var(--opacity-white-20); --border-width: calc(var(--stroke-border-width) * 1px); --divider-width: calc(var(--stroke-divider-width) * 1px); /* ── Semantic status colors (Primitives collection) */ --status-success: var(--color-mountain-meadow); /* rgb(26,188,156) */ --status-success-surface: var(--color-mountain-meadow-lightest); --status-warning: var(--color-buttercup); /* rgb(243,156,18) */ --status-warning-surface: var(--color-buttercup-lightest); --status-danger: var(--color-cinnabar); /* rgb(231,76,60) */ --status-danger-surface: var(--color-cinnabar-lightest); --status-info: var(--color-pickled-bluewood); /* rgb(44,62,80) */ --status-info-surface: var(--color-pickled-bluewood-lightest); /* ── Buttons (exact values read off the Style Guide → UI Elements → Buttons frame) */ /* The Button component's own fill in the kit is #007BFF, but EVERY real Tinybox page overrides the primary fill to Pickled Bluewood #2C3E50 - so that is the brand default here, with the raw kit fill kept as --button-primary-bg-kit. */ --button-primary-bg: rgb(44,62,80); --button-primary-bg-kit: rgb(0,123,255); --button-primary-ring: rgb(44,62,80); --button-primary-text: var(--color-neutral-white); --button-radius: 12px; --button-padding-y: 6px; --button-padding-x: 12px; --button-padding-y-sm: 4px; --button-padding-x-sm: 10px; --button-gap: 8px; --button-gap-icon: 12px; --button-font-size: 16px; --button-font-weight: 500; /* ── Radii (UI Styles collection: small/medium/large are all 8 in this file) */ --radius-sm: calc(var(--radius-small) * 1px); --radius-md: calc(var(--radius-medium) * 1px); --radius-lg: calc(var(--radius-large) * 1px); --radius-input: 4px; /* checkbox */ --radius-frame: 5px; /* the kit's own showcase frames */ --radius-pill: 999px; /* ── Layout */ --container-sm: calc(var(--container-container-small) * 1px); /* 768 */ --container-md: calc(var(--container-container-medium) * 1px); /* 1024 */ --container-lg: calc(var(--container-container-large) * 1px); /* 1280 */ --page-padding: calc(var(--page-padding-padding-global) * 1px); /* 64 desktop / 20 mobile */ --section-padding-sm: calc(var(--section-padding-padding-section-small) * 1px); /* 48 */ --section-padding-md: calc(var(--section-padding-padding-section-medium) * 1px); /* 80 */ --section-padding-lg: calc(var(--section-padding-padding-section-large) * 1px); /* 112 */ --max-width-xxs: calc(var(--max-width-max-width-xxsmall) * 1px); --max-width-xs: calc(var(--max-width-max-width-xsmall) * 1px); --max-width-sm: calc(var(--max-width-max-width-small) * 1px); --max-width-md: calc(var(--max-width-max-width-medium) * 1px); --max-width-lg: calc(var(--max-width-max-width-large) * 1px); --max-width-xl: calc(var(--max-width-max-width-xlarge) * 1px); --max-width-xxl: calc(var(--max-width-max-width-xxlarge) * 1px); /* ── Spacing rhythm observed in the sections (no spacing scale exists as variables) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-28: 112px; /* ── Motion (the kit specifies none; these are the house defaults used by this system) */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ /* Sticky header's own scroll-triggered shrink (padding/logo scale/ tagline fade/toggle reposition, all in page.css) uses this instead of --duration-base on purpose: page.css zeroes --duration-base below 768px to kill decorative hover/lift motion on mobile, but that same header shrink is structural feedback (the bar is visibly changing shape), not a decorative flourish, and snapping it instantly reads as jarring rather than calm. A separate token keeps it animated at every width without carving an exception into every mobile --duration-base consumer. */ --duration-header: 280ms; /* @kind other */ }