/* motif/tokens.css — Design tokens as CSS custom properties */ :root { /* --- Colors: Primary (Sage Green) --- */ --color-primary-50: #f2f7ee; --color-primary-100: #e0edce; --color-primary-200: #c1d9a2; --color-primary-300: #a0c47e; --color-primary-400: #7BA35A; --color-primary-500: #5f8a40; --color-primary-600: #4a7030; --color-primary-700: #3a5826; --color-primary-800: #2d441d; --color-primary-900: #1e2f14; /* --- Colors: Secondary (Warm Amber) --- */ --color-secondary-50: #fffbeb; --color-secondary-100: #fef3c7; --color-secondary-200: #fde68a; --color-secondary-300: #fcd34d; --color-secondary-400: #f9a825; --color-secondary-500: #e8930d; --color-secondary-600: #c17900; --color-secondary-700: #9a6200; --color-secondary-800: #7a4d00; --color-secondary-900: #5c3a00; /* --- Colors: Accent --- */ --color-accent-50: #fff7ed; --color-accent-100: #ffedd5; --color-accent-200: #fed7aa; --color-accent-300: #fdba74; --color-accent-400: #fb923c; --color-accent-500: #f97316; --color-accent-600: #ea580c; --color-accent-700: #c2410c; --color-accent-800: #9a3412; --color-accent-900: #7c2d12; /* --- Colors: Family palette --- * Brand colors for the pointegrity product families. Pulled from * pointegrity.com's live family-tag CSS so all consumers can * reference these via tokens instead of hardcoding hex. * * -100 tint, used for chip backgrounds and subtle surfaces * -200 mid-tone, hairlines/borders adjacent to tinted surfaces * -700 deep, chip text + card top borders + signature pips * * Each family stays internally tonal (no cross-family blending). * Add intermediate stops (-300/-500) only when a real surface * needs them. */ --color-family-pi-100: #dde7f1; --color-family-pi-200: #b8cfdc; --color-family-pi-700: #1e4a72; --color-family-cura-100: #f8dada; --color-family-cura-200: #e8b9b9; --color-family-cura-700: #9b1c1c; --color-family-sc-100: #e2eadb; --color-family-sc-200: #cad8be; --color-family-sc-700: #4f7c40; /* --- Colors: Neutral --- */ --color-neutral-50: #f9fafb; --color-neutral-100: #f3f4f6; --color-neutral-200: #e5e7eb; --color-neutral-300: #d1d5db; --color-neutral-400: #9ca3af; --color-neutral-500: #6b7280; --color-neutral-600: #4b5563; --color-neutral-700: #374151; --color-neutral-800: #1f2937; --color-neutral-900: #111827; /* --- Colors: Semantic --- */ --color-success-50: #f0fdf4; --color-success-100: #dcfce7; --color-success-500: #22c55e; --color-success-600: #16a34a; --color-success-700: #15803d; --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-info-50: #eff6ff; --color-info-100: #dbeafe; --color-info-500: #3b82f6; --color-info-600: #2563eb; --color-info-700: #1d4ed8; /* --- Surface tokens --- */ --color-bg: #ffffff; --color-fg: var(--color-neutral-900); --color-fg-muted: var(--color-neutral-500); --color-border: var(--color-neutral-200); --color-card-bg: #ffffff; /* --- Typography --- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK TC", sans-serif; --font-serif: Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; /* --- Spacing --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --- Semantic spacing (role tokens) --------------------------------- * Components reference THESE, not the raw --space-* scale, so a surface's * padding can be tuned — or family/app-overridden — from one place * instead of edited per component (the difference between turning a knob * and patching every leaf). Defaults reproduce the historical look, so * adopting them is a no-op until something overrides them. * surface — cards, panels, modals (inner padding) * control — buttons (y x) field — inputs / selects (y x) * stack — default vertical gap between stacked blocks */ --motif-pad-surface: var(--space-4) var(--space-6); --motif-pad-control: var(--space-2) var(--space-4); --motif-pad-field: var(--space-2) var(--space-3); --motif-gap-stack: var(--space-4); /* --- Borders --- */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; --border-1: 1px; --border-2: 2px; --border-4: 4px; /* --- Shadows --- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* --- Transitions --- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* --- Layout --- */ --nav-height: 64px; --sidebar-width: 260px; --sidebar-width-sm: 200px; /* Workbench shell (activity rail + master-detail zones). */ --rail-width: 52px; --list-width: 264px; --context-width: 340px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* --- Mobile / touch --- * * Tokens used by motif/mobile.css (the opt-in mobile aspect) and * by any app component that needs to reason about iOS/Android * notches, gesture insets, or tap targets. Defined at :root so * apps can override without touching mobile.css. * * Safe-area insets fall back to 0 on browsers/platforms without * env() support — every value used here is safe to compose in * calc() expressions like `calc(var(--bottom-nav-height) + var(--safe-bottom))`. * * Tap target follows Apple HIG (44pt) / Material (48dp) — 44px * is the lower-bound that still passes both. Apps targeting only * Android can bump --tap-target. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --tap-target: 44px; --bottom-nav-height: 56px; --mobile-header-height: 48px; /* FAB at 48px — comfortably above the 44px tap-target floor while * staying visually subordinate to the bottom-nav (56px). Material * spec is 56px standard / 40px mini; we sit between them so two * stacked FABs don't dominate the right edge. */ --fab-size: 48px; /* --- Z-index -------------------------------------------------- * Eight layers, ordered by "what blocks what." Each layer is a * named role; classes pick the role token, never raw integers. * * base page content, default flow * dropdown autocomplete / select menus * sticky sticky section headers (.sticky utility) * fixed page-level chrome that sheets/editors cover when * they engage — e.g. the mobile-header at top * overlay non-blocking sheets — bottom-sheet, side-sheet * (slide above content; below app chrome + editors) * drawer immersive surfaces: editor modals (fullscreen-modal, * drawer-right) AND persistent app chrome that must * stay above sheets (bottom-nav, FABs). These cohabit * cleanly because DOM order resolves the same-level * case: an editor opens AFTER nav exists, so DOM * order paints the editor over nav — which is the * desired behavior (the editor is the new context). * modal decision dialogs — confirm / alert / .modal-overlay. * ALWAYS above any open editor surface; this is what * lets a confirm-dialog launched from inside a * fullscreen-modal sit correctly on top. * toast transient notifications on top of everything * * Migration note: pre-2026-05 --z-modal collapsed editor surfaces * AND decision dialogs at 500, which made nested-modal stacking * fragile. The split between --z-drawer (500, editor) and * --z-modal (600, decision) is the fix; raw 500/600 references * outside motif should be replaced with the right token. */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; /* ──────────────────────────────────────────────────────────── * MOTIF EXTENSIONS — opt-in vocabulary for richer voices. * * The --motif-* namespace holds tokens that families (pi, sc, …) * lean on but motif's defaults don't require. Apps that don't * load a family file ignore them; apps that do get a richer * vocabulary without polluting the core token names. * ──────────────────────────────────────────────────────────── */ /* Typography — Plex Serif as the display face, Plex Mono for monospace. Apps must still load the actual webfonts (Google Fonts link or motif/plex.css companion). */ --motif-font-display: 'IBM Plex Serif', Georgia, Cambria, "Times New Roman", Times, serif; --motif-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Display type scale — extends --text-3xl (1.875rem) upward for hero / auth-title sized headlines. */ --motif-text-display-1: 2.875rem; --motif-text-display-2: 2.125rem; /* Wider tracking step for Plex-Mono small-caps style labels ("PERSONAL · DATA · TOOL" patterns). */ --motif-tracking-small-caps: 0.08em; /* Page-level motion choreography — used by family-defined fade-in / rise-in keyframes. */ --motif-motion-page-enter: 200ms; --motif-motion-stagger-step: 50ms; /* Surface depth vocabulary — hairline border + warm low-alpha shadow. Families pick which one to lean on. */ --motif-border-hairline: 1px solid var(--color-neutral-200); --motif-shadow-paper-soft: 0 1px 2px rgba(120, 80, 30, 0.04), 0 8px 24px -8px rgba(120, 80, 30, 0.06); } /* --- Dark theme --- */ [data-theme="dark"] { --color-bg: var(--color-neutral-900); --color-fg: var(--color-neutral-100); --color-fg-muted: var(--color-neutral-400); --color-border: var(--color-neutral-700); --color-card-bg: var(--color-neutral-800); } [data-theme="dark"] .app-sidebar-nav a:hover { background-color: var(--color-neutral-700); } [data-theme="dark"] .app-sidebar-nav a.active { background-color: var(--color-primary-900); color: var(--color-primary-200); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--color-neutral-900); --color-fg: var(--color-neutral-100); --color-fg-muted: var(--color-neutral-400); --color-border: var(--color-neutral-700); --color-card-bg: var(--color-neutral-800); } :root:not([data-theme="light"]) .app-sidebar-nav a:hover { background-color: var(--color-neutral-700); } :root:not([data-theme="light"]) .app-sidebar-nav a.active { background-color: var(--color-primary-900); color: var(--color-primary-200); } }