/* ============================================================================ Geist design tokens. Every visual property lives here. Future themes override these variables under a [data-theme="..."] selector on . ========================================================================== */ :root { /* ---- palette: warm, restrained, Rams-inspired ------------------------- */ --color-bg: #f2f0eb; /* app / canvas background */ --color-surface: #faf9f6; /* floating surfaces (panels, toolbar) */ --color-surface-raised: #ffffff; /* inputs, cards */ --color-ink: #1c1b19; /* primary text */ --color-ink-secondary: #6e6b64; /* secondary text */ --color-ink-faint: #a8a49b; /* placeholders, disabled */ --color-accent: #5ea950; /* functional green, used sparingly */ --color-accent-hover: #4a8c40; --color-on-accent: #ffffff; --color-danger: #b3261e; --color-border: rgba(28, 27, 25, 0.12); --color-border-strong: rgba(28, 27, 25, 0.28); --color-grid-dot: rgba(28, 27, 25, 0.16); --color-scrim: rgba(242, 240, 235, 0.72); --color-hover: rgba(28, 27, 25, 0.05); --color-active: rgba(28, 27, 25, 0.09); --color-focus-ring: rgba(94, 169, 80, 0.4); /* ---- entity accents (cards / highlights / views / apps in shared folders) ---- */ --entity-card: #4a7ab5; --entity-highlight: #c47a3a; --entity-view: #8b6bb5; --entity-app: #3d9a8b; /* ---- typography -------------------------------------------------------- */ --font-sans: ui-sans-serif, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.5rem; /* 24px */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --leading-tight: 1.25; --leading-normal: 1.5; --tracking-wide: 0.04em; /* ---- spacing ------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-panel-gap: 16px; /* gap keeping floating panels off edges */ /* ---- radius -------------------------------------------------------------- */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-pill: 999px; --radius-round: 50%; /* ---- elevation ------------------------------------------------------------ */ --shadow-1: 0 1px 2px rgba(28, 27, 25, 0.06), 0 1px 4px rgba(28, 27, 25, 0.06); --shadow-2: 0 2px 6px rgba(28, 27, 25, 0.08), 0 8px 24px rgba(28, 27, 25, 0.08); --shadow-3: 0 4px 12px rgba(28, 27, 25, 0.1), 0 16px 48px rgba(28, 27, 25, 0.14); /* ---- borders ---------------------------------------------------------------- */ --border-hairline: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); /* ---- z-index scale ----------------------------------------------------------- */ --z-canvas: 0; --z-floating: 10; /* toolbar, chat, collapsed orbs */ --z-panel: 20; /* expanded panels */ --z-overlay: 30; /* auth gate, modals */ --z-popover: 35; /* dropdowns, anchored menus (above modals) */ --z-toast: 40; /* ---- motion --------------------------------------------------------------------- */ --ease: cubic-bezier(0.32, 0.72, 0.24, 1); --dur-fast: 120ms; --dur-med: 240ms; --dur-slow: 360ms; --dur-panel: 440ms; /* ---- component sizes -------------------------------------------------------------- */ --orb-size: 44px; --icon-size: 20px; --toolbar-height: 44px; --control-height: 30px; --chat-width: min(560px, calc(100vw - 2 * var(--space-panel-gap))); --chat-height: 48px; /* desktop: open chat column is ~1/3; board with chat is ~2/3 */ --panel-col-width: calc((100vw - 3 * var(--space-panel-gap)) / 3); --panel-board-width-with-chat: calc((100vw - 3 * var(--space-panel-gap)) * 2 / 3); /* board-only (chat collapsed): half viewport */ --panel-right-width: calc(50vw - 1.5 * var(--space-panel-gap)); --panel-right-height: calc(100vh - 2 * var(--space-panel-gap)); --panel-left-width: min(480px, calc(100vw - 2 * var(--space-panel-gap))); --panel-left-max-height: calc(100vh - 2 * var(--space-panel-gap)); /* settings stacked above chat while board is also open */ --panel-left-half-h: calc(50vh - 1.5 * var(--space-panel-gap)); /* reserved slot for canvas-focus orb beside settings in the chat column */ --chrome-focus-slot: calc(var(--orb-size) + var(--space-2)); /* top of the free area under the orb/toolbar row */ --chrome-top: calc(var(--space-panel-gap) + var(--orb-size) + var(--space-2)); --auth-card-width: 360px; /* ---- canvas ------------------------------------------------------------------------- */ --canvas-dot-size: 1.5px; --canvas-grid-gap: 24px; }