/* WorkSignal design tokens — Direction 1b "Data-forward". */ /* This is a deliberate fork from the shared AppCaddy teal/Syne system: worksignal has */ /* its own visual identity from here. See the design decision logged in CLAUDE.md. */ /* Fonts are self-hosted in ./fonts (latin subset), so no surface calls a CDN. */ /* IBM Plex Sans — UI, headings, body. */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexSans-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexSans-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexSans-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/IBMPlexSans-700.woff2') format('woff2'); } /* IBM Plex Mono — figures, labels, tags, meta. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/IBMPlexMono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/IBMPlexMono-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/IBMPlexMono-600.woff2') format('woff2'); } :root { /* Type */ --ws-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --ws-font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* Spacing scale (spec): 4 6 8 11 14 16 18 20 22 24 40 */ --ws-s1: 4px; --ws-s2: 6px; --ws-s3: 8px; --ws-s4: 11px; --ws-s5: 14px; --ws-s6: 16px; --ws-s7: 18px; --ws-s8: 20px; --ws-s9: 22px; --ws-s10: 24px; --ws-s11: 40px; /* Radii */ --ws-r-card: 10px; --ws-r-input: 8px; --ws-r-tag: 4px; --ws-r-chip: 5px; --ws-r-pill: 20px; --ws-r-logo: 10px; /* Motion */ --ws-transition: 140ms ease; /* ---- Light theme ---- */ --ws-bg: #F6F8F9; --ws-surface: #FFFFFF; --ws-input-bg: #F8FAFB; --ws-table-header-bg: #F2F6F7; --ws-chip-bg: #F2F6F7; --ws-border: #E4EAED; --ws-border-2: #DBE2E6; --ws-border-control: #D3DADE; --ws-row-divider: #EEF2F4; --ws-track: #EEF2F4; --ws-text: #12222A; --ws-text-2: #4A5B62; --ws-text-3: #5A6B72; --ws-muted: #8A979C; --ws-label: #7C8B91; --ws-teal: #155E63; --ws-teal-fill: #E6F2F2; --ws-teal-border: #BCDAD9; --ws-on-teal: #FFFFFF; --ws-star: #C58A2E; } /* Dark — forced via [data-theme="dark"] on (set by the header toggle in app.js). */ [data-theme="dark"] { --ws-bg: #0D181C; --ws-surface: #111F24; --ws-input-bg: #0D181C; --ws-table-header-bg: #152329; --ws-chip-bg: #152329; --ws-border: #1E2B30; --ws-border-2: #1E2B30; --ws-border-control: #23343A; --ws-row-divider: #17262B; --ws-track: #1A2A30; --ws-text: #E6EEF0; --ws-text-2: #9DB0B7; --ws-text-3: #8EA3AA; --ws-muted: #6B8891; --ws-label: #6B8891; --ws-teal: #38C3AB; --ws-teal-fill: #123029; --ws-teal-border: #235049; --ws-on-teal: #04201B; --ws-star: #E0A53A; } /* Dark — automatic when the user has not explicitly forced a theme. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --ws-bg: #0D181C; --ws-surface: #111F24; --ws-input-bg: #0D181C; --ws-table-header-bg: #152329; --ws-chip-bg: #152329; --ws-border: #1E2B30; --ws-border-2: #1E2B30; --ws-border-control: #23343A; --ws-row-divider: #17262B; --ws-track: #1A2A30; --ws-text: #E6EEF0; --ws-text-2: #9DB0B7; --ws-text-3: #8EA3AA; --ws-muted: #6B8891; --ws-label: #6B8891; --ws-teal: #38C3AB; --ws-teal-fill: #123029; --ws-teal-border: #235049; --ws-on-teal: #04201B; --ws-star: #E0A53A; } } @media (prefers-reduced-motion: reduce) { :root { --ws-transition: 0ms; } }