/* * Skill Workbench · design tokens (docs/09-VISUAL-SPEC.md §2) * * Loaded FIRST. Fixes the cascade for every stylesheet of the tool: reset < tokens < base < layout < components < surfaces < utilities * Everything ships inside @layer except site-chrome.css PART 2 (foreign widgets are unlayered; see that file). * * Rules for every author: * - No raw colour, size, radius, shadow, duration or z-index outside this file. Components read var(--…) only. * - Everything sits on the 4px grid. Exception: 1px optical compensation inside a control. * - ONE filled (primary) button per surface. Indigo = primary / yours / AI is live. Teal = ready / included. * Amber = attention. Red = failed / destructive. Nothing else is coloured. * - No bordered box inside a bordered box: group with space and a 1px --border divider. * - Dark only (color-scheme: dark), the site's own plane (#0D0C1D) so nav, footer and tool read as one page. */ @layer reset, tokens, base, layout, components, surfaces, utilities; @layer tokens { :root { color-scheme: dark; /* ---- Surfaces ---- */ --canvas: #0D0C1D; /* = the site plane (index1.css --bg-primary): nav, tool and footer share it */ --surface-1: #14132A; /* cards, panes, reader */ --surface-2: #1B1A36; /* controls, selected row, dialogs, wells */ --surface-3: #262547; /* menus, hover, pressed, chips on surface-2 */ --scrim: rgba(6, 5, 16, .72); /* ---- Lines ---- */ --border: #292849; /* hairlines (decorative) */ --border-strong: #3A3966; /* resting outline of buttons */ --border-control: #7C7BAB; /* 3:1 non-text: inputs, checkboxes, switch tracks, selected ring */ /* ---- Text ---- */ --text: #F1F0FB; --text-2: #C4C3DB; --text-3: #A09FBE; /* meta, hints, placeholders: >= 4.5:1 on every surface incl. --surface-3 */ --text-disabled: #8B8AAE; /* disabled labels only */ /* ---- Accent (the site's indigo) ---- */ --accent: #4F46E5; /* primary fill; white text = 6.3:1 */ --accent-hover: #5F57F0; --accent-press: #4038CC; --accent-text: #B9B5FF; /* accent-coloured TEXT and icons on dark surfaces */ --accent-tint: rgba(129, 120, 255, .14); --accent-tint-strong: rgba(129, 120, 255, .24); --on-accent: #FFFFFF; --focus: #D2CEFF; /* focus ring: >= 3:1 against canvas, surface-1/2/3 AND against the indigo fill */ /* ---- Status ---- */ --ready: #5EEAD4; /* ready / included / installed */ --ready-tint: rgba(94, 234, 212, .12); --warning: #FCD34D; --warning-tint: rgba(252, 211, 77, .12); --danger: #FCA5A5; /* danger TEXT */ --danger-tint: rgba(252, 165, 165, .12); --danger-fill: #C0261B; /* destructive button fill; white text = 5.6:1 */ --danger-fill-hover: #D53326; --on-danger: #FFFFFF; /* ---- Source-type marks (decorative, never the only signal: each row also has a text label) ---- */ --k-pdf: #F9A8D4; --k-doc: #7DD3FC; --k-text: #C4C3DB; --k-url: #5EEAD4; --k-research: #FCD34D; --k-paste: #B9B5FF; --k-data: #A3E635; --seg-1: #818CF8; --seg-2: #2DD4BF; --seg-3: #FBBF24; --seg-4: #F472B6; --seg-5: #38BDF8; --seg-6: #A3E635; /* ---- Code / file text ---- */ --code-bg: #100F24; --code-key: #B9B5FF; --code-str: #86EFAC; --code-h: #F1F0FB; --code-cmt: #8D8CB0; --mark: rgba(252, 211, 77, .22); --ins-tint: rgba(94, 234, 212, .13); --del-tint: rgba(252, 165, 165, .12); /* ---- Site chrome palette (frozen copy of index1.css :root; used only by site-chrome.css) ---- */ --site-bg: #0D0C1D; --site-bg-2: #1A1A2E; --site-primary: #4F46E5; --site-secondary: #7C3AED; --site-primary-dark: #4A44C8; --site-text: #FFFFFF; --site-text-2: #9CA3AF; --site-text-head: #E5E7EB; --site-glass: rgba(255, 255, 255, .05); --site-glass-hover: rgba(255, 255, 255, .08); --site-glass-border: rgba(255, 255, 255, .10); --site-glass-border-hover: rgba(255, 255, 255, .20); --site-card: rgba(255, 255, 255, .03); --site-focus: #A78BFA; --site-profile: #EB7113; --site-white: #FFFFFF; /* the shared TPIUpgradeModal's own tokens (its card follows prefers-color-scheme) */ --tpi-muted-on-light: #555A67; --tpi-muted-2-on-light: #4A4F5C; --tpi-muted-on-dark: #B9BDCA; --tpi-muted-2-on-dark: #C8CCD8; --tpi-focus: #5B3DF5; --tpi-plan-on-dark: #B8ABFF; --tpi-ribbon-1: #5B3DF5; --tpi-ribbon-2: #7A3BD6; --tpi-ribbon-3: #B0217A; --tpi-ribbon-code-bg: rgba(20, 10, 60, .30); /* ---- Type families ---- */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* ---- Type scale (9 sizes). Inputs are raised to 16px on touch only (--fs-input). ---- */ --fs-hero: 3rem; --lh-hero: 3.25rem; /* 48/52 landing H1 only */ --fs-head: 2rem; --lh-head: 2.5rem; /* 32/40 landing section heads, guided-start title */ --fs-display: 1.5rem; --lh-display: 2rem; /* 24/32 empty-state titles, bundle name */ --fs-title: 1.125rem; --lh-title: 1.5rem; /* 18/24 pane + dialog titles */ --fs-lead: 1rem; --lh-lead: 1.5rem; /* 16/24 lead copy, mobile inputs */ --fs-body: .875rem; --lh-body: 1.25rem; /* 14/20 rows, inputs, buttons, body */ --fs-label: .8125rem; --lh-label: 1.125rem; /* 13/18 chips, help, menu items, table cells */ --fs-meta: .75rem; --lh-meta: 1rem; /* 12/16 counts, timestamps, kbd, uppercase group labels */ --fs-code: .8125rem; --lh-code: 1.25rem; /* 13/20 mono file text */ --fs-input: var(--fs-body); --fw-regular: 450; --fw-medium: 550; --fw-bold: 650; --ls-caps: .06em; --ls-tight: -.015em; --ls-hero: -.03em; /* ---- Spacing (4px grid) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --s-3: var(--sp-3); --s-4: var(--sp-4); --s-6: var(--sp-6); /* names the bridge CSS reads */ /* ---- Radii ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ---- Elevation ---- */ --e-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .4); --e-2: 0 8px 24px rgba(0, 0, 0, .5); --e-3: 0 24px 64px rgba(0, 0, 0, .65); /* ---- Motion ---- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: 120ms; --t-med: 200ms; --t-slow: 320ms; --t-shimmer: 1.6s; /* ---- Target sizes ---- */ --target: 32px; /* desktop control height (>= 24 WCAG 2.5.8) */ --target-touch: 44px; /* every interactive control at <= 767px */ --ctl: var(--target); /* ---- Layout ---- */ --gutter: 24px; --shell-max: 1360px; --nav-h: 64px; /* FALLBACK. The page MUST set it from the measured bottom edge of .nav-container (mock.js does; see spec §9) */ --bar-h: 52px; /* the project bar's single row (min-height); never assign the measured value to this one */ --bar-total: var(--bar-h); /* MEASURED height of the whole sticky bar incl. the storage line (app.js measureNav sets it) */ --cookie-h: 0px; /* MEASURED height of the site's fixed cookie banner (#cookie-consent-banner, z-index 10000) while it is showing; the tool sits above it */ --tabbar-h: 0px; /* 64px + safe-area at <= 767px (bottom tab bar) */ --scroll-top: calc(var(--nav-h) + var(--bar-total) + var(--sp-4)); --rail-w: 300px; --z-base: 0; --z-sticky: 20; --z-sitenav: 50; --z-popover: 75; --z-tabbar: 70; --z-keeper: 900; --z-toast: 950; --z-dialog: 1000; --z-upgrade: 1000000; } @media (max-width: 1023.98px) { :root { --gutter: 20px; --rail-w: 264px; } } @media (max-width: 767.98px) { :root { --gutter: 16px; --ctl: var(--target-touch); --fs-input: 1rem; --fs-hero: 2rem; --lh-hero: 2.375rem; --fs-head: 1.625rem; --lh-head: 2rem; --fs-display: 1.375rem; --lh-display: 1.75rem; --tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px)); --scroll-top: calc(var(--sp-4)); } } @media (max-height: 520px) { :root { --scroll-top: var(--sp-4); } } }