/* Technyder design tokens — LIGHT theme. Dark variant preserved as tokens-dark.css. Swap the link in to flip. */ :root { /* Surface — warm off-white, near-paper */ --surface-base: #FAFAF7; --surface-card: #FFFFFF; --surface-card-2: #F4F4F0; --surface-card-raised: #FFFFFF; --surface-border: #E4E4DE; --surface-border-soft: #EFEFEA; /* Text */ --text-primary: #0E1116; --text-secondary: #3A414B; --text-muted: #6B7280; --text-faint: #9CA0A8; /* Accent — Technyder green, tuned darker for AA contrast on light surface */ --accent: #00A552; --accent-strong: #008A44; --accent-dim: #BDE8CF; --accent-tint: rgba(0, 165, 82, 0.08); --accent-tint-strong: rgba(0, 165, 82, 0.14); --accent-border: rgba(0, 165, 82, 0.32); /* Signal */ --signal-amber: #B07A12; --signal-amber-tint: rgba(176, 122, 18, 0.10); --signal-red: #C2453F; --signal-red-tint: rgba(194, 69, 63, 0.08); /* Type scale */ --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-md: 20px; --t-lg: 28px; --t-xl: 44px; --t-2xl: 64px; /* Spacing (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-32: 128px; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; /* Motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 150ms; /* Shadows — restrained, layered */ --shadow-card: 0 1px 0 0 rgba(14, 17, 22, 0.03), 0 0 0 1px var(--surface-border); --shadow-raised: 0 8px 24px -12px rgba(14, 17, 22, 0.10), 0 2px 6px -2px rgba(14, 17, 22, 0.06); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } } * { box-sizing: border-box; } html, body { margin: 0; background: var(--surface-base); color: var(--text-primary); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: var(--t-base); line-height: 1.5; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } ::selection { background: var(--accent); color: #FFFFFF; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn-ghost { background: var(--surface-card); color: var(--text-primary); border-color: var(--surface-border); } .btn-ghost:hover { border-color: #C9C9C0; background: var(--surface-card-2); } .btn-dark { background: var(--text-primary); color: var(--surface-card); border-color: var(--text-primary); } .btn-dark:hover { background: #000; border-color: #000; } .btn-text { background: transparent; color: var(--text-secondary); border-color: transparent; padding: 10px 0; } .btn-text:hover { color: var(--text-primary); } /* Score chip vocabulary */ .chip { display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; border: 1px solid; line-height: 1; } .chip-hi { color: var(--accent-strong); border-color: var(--accent-border); background: var(--accent-tint); } .chip-mid { color: var(--signal-amber); border-color: rgba(176, 122, 18, 0.30); background: var(--signal-amber-tint); } .chip-lo { color: var(--text-muted); border-color: var(--surface-border); background: var(--surface-card-2); } .chip-kill { color: var(--signal-red); border-color: rgba(194, 69, 63, 0.32); background: var(--signal-red-tint); }