/* Swarm design tokens — generated from DESIGN.md. OKLCH only. Dark is default; [data-theme="light"] on switches. Do not add a value here that DESIGN.md does not document. */ @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300..700;1,400&family=Alumni+Sans:wght@100;300;400;500&display=swap'); :root { /* brand — identical in both modes */ --gold: oklch(84% 0.19 80.46); --gold-ink: oklch(84% 0.19 80.46); --gold-quiet: oklch(84% 0.19 80.46 / 0.12); --patina: oklch(70% 0.12 188); --patina-ink: oklch(70% 0.12 188); /* ground + ink — dark (default) */ --canvas: oklch(7% 0.006 95); --surface: oklch(11% 0.006 95); --sunken: oklch(4% 0.004 95); --text: oklch(91% 0 0); --body: oklch(88% 0 0); --muted: oklch(72% 0 0); --faint: oklch(62% 0 0); --hairline: oklch(24% 0.006 95); --solid-cta: oklch(91% 0 0); --solid-cta-ink: oklch(7% 0.006 95); /* status */ --ok: oklch(72% 0.13 155); --attention: oklch(80% 0.14 75); --risk: oklch(66% 0.18 25); --neutral: var(--muted); /* on-gold ink never changes: gold is a light fill in both modes */ --on-gold: oklch(18% 0.006 95); /* focus ring: kinpaku on dark ground, reading-weight gold on paper */ --focus: oklch(84% 0.19 80.46); /* elevation */ --shadow-panel: 0 24px 70px oklch(2% 0.004 95 / 0.42); --shadow-cta: 0 18px 48px oklch(2% 0.004 95 / 0.40); /* type */ --font-display: 'Alumni Sans', system-ui, sans-serif; --font-ui: 'Albert Sans', system-ui, -apple-system, sans-serif; --font-mono: SFMono-Regular, 'Roboto Mono', Consolas, monospace; --t-11: 0.6875rem; --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-24: 1.5rem; --t-28: 1.75rem; --t-32: 2rem; --t-40: 2.5rem; --t-56: 3.5rem; --t-72: 4.5rem; /* space — 8 16 24 32 48 80 112, nothing between */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 80px; --s-7: 112px; /* radius */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-pill: 999px; /* motion */ --e: cubic-bezier(0.2, 0, 0, 1); --d-state: 120ms; --d-move: 200ms; --d-panel: 320ms; } :root[data-theme="light"] { --gold-ink: oklch(52% 0.15 80.46); --patina-ink: oklch(48% 0.10 188); --focus: oklch(52% 0.15 80.46); --canvas: oklch(97% 0.006 95); --surface: oklch(99% 0.003 95); --sunken: oklch(94% 0.008 95); --text: oklch(20% 0.006 95); --body: oklch(28% 0.005 95); --muted: oklch(46% 0.004 95); --faint: oklch(58% 0.004 95); --hairline: oklch(88% 0.008 95); --solid-cta: oklch(18% 0.006 95); --solid-cta-ink: oklch(97% 0.006 95); --ok: oklch(48% 0.12 155); --attention: oklch(54% 0.13 75); --risk: oklch(50% 0.18 25); --shadow-panel: 0 24px 70px oklch(20% 0.006 95 / 0.10); --shadow-cta: none; } *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; } html[data-theme="light"] { color-scheme: light; } body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--font-ui); font-size: var(--t-16); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; } h1 { font-size: var(--t-56); font-weight: 100; line-height: 1.05; letter-spacing: -0.01em; } h2 { font-size: var(--t-32); font-weight: 300; line-height: 1.15; } h3 { font-size: var(--t-24); font-weight: 400; line-height: 1.2; } /* Two-Face rule: nothing under 1.25rem uses the display face. */ h4, h5, h6 { font-family: var(--font-ui); font-weight: 600; color: var(--text); margin: 0; } h4 { font-size: var(--t-18); } .sw-label { font-family: var(--font-mono); font-size: var(--t-11); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---- components ---- */ .sw-button { font-family: var(--font-ui); font-size: var(--t-14); font-weight: 500; padding: 0 var(--s-2); min-height: 44px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--d-state) var(--e), border-color var(--d-state) var(--e); } .sw-button--primary { background: var(--gold); color: var(--on-gold); } .sw-button--primary:hover { background: oklch(88% 0.19 80.46); } .sw-button--solid { background: var(--solid-cta); color: var(--solid-cta-ink); } .sw-button--secondary { background: transparent; color: var(--text); border-color: var(--hairline); } .sw-button--secondary:hover { background: var(--sunken); } .sw-button--ghost { background: transparent; color: var(--muted); } .sw-button--ghost:hover { color: var(--text); } .sw-button:disabled { opacity: 0.45; cursor: not-allowed; } .sw-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: var(--s-3); /* Hairline First: no shadow on cards. */ } .sw-panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-panel); } .sw-chip { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-12); font-weight: 500; padding: 4px 10px; border-radius: var(--r-xs); background: var(--sunken); color: var(--body); border: 1px solid var(--hairline); } .sw-chip--gold { background: var(--gold); color: var(--on-gold); border-color: transparent; } .sw-chip--selected { background: var(--gold-quiet); border-color: var(--gold); color: var(--text); } /* Status: label + icon carry the meaning; colour is the third signal. */ .sw-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); font-weight: 500; } .sw-status__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; flex: none; } .sw-status--ok { color: var(--ok); } .sw-status--attention { color: var(--attention); } .sw-status--risk { color: var(--risk); } .sw-status--neutral { color: var(--muted); } /* The signature component: the sentence that caused a work item. */ .sw-evidence { font-family: var(--font-mono); font-size: var(--t-13); line-height: 1.7; color: var(--muted); border-left: 1px solid var(--gold); padding: var(--s-1) 0 var(--s-1) var(--s-2); margin: var(--s-2) 0; } /* Visually hidden, still announced. For section headings that carry the document outline without needing to be seen. */ .sw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .sw-empty { text-align: center; padding: var(--s-5) var(--s-3); color: var(--muted); } .sw-skeleton { background: var(--sunken); border-radius: var(--r-xs); animation: sw-pulse 1.4s ease-in-out infinite; } @keyframes sw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }