/* ============================================================ secqr ops · DESIGN TOKENS ---------------------------------------------------------------- The canonical, single-source values that everything in the product is built from. Light is default. Add data-theme="dark" on or any container to switch. Naming: every token starts with --ds-* so it's grep-able. ============================================================ */ :root, [data-theme="light"] { /* ------- Surfaces & ink ------- */ --ds-bg: #FAFAF7; /* page background */ --ds-bg-2: #F4F2EC; /* nested / inset surfaces */ --ds-surface: #FFFFFF; /* cards, sheets, tables */ --ds-surface-2: #F4F2EC; /* row hover, secondary */ --ds-surface-3: #EAE7DD; /* heavy inset (code, kbd) */ --ds-ink: #15170F; /* body text, default ink */ --ds-ink-1: #3D413A; /* secondary text */ --ds-ink-2: #6C7066; /* tertiary / meta */ --ds-ink-3: #9CA098; /* placeholder, disabled */ --ds-ink-inv: #FFFFFF; /* on-brand / on-dark text */ --ds-rule: #E8E6DE; /* default border */ --ds-rule-2: #D2CFC2; /* emphasized border */ --ds-rule-strong: #15170F; /* divider on dark/decorative */ /* ------- Brand ------- */ --ds-brand: #7BB020; /* secqr green, brand-true — sampled from logo PNG */ --ds-brand-deep: #5E841A; /* ink-safe brand text */ --ds-brand-tint: #EEF4DC; /* brand wash, hover backdrop */ --ds-brand-bright: #A6E22E; /* live data, dark-screen brand */ /* ------- Status ------- */ --ds-ok: #4A8B2C; --ds-ok-tint: #E5F0D6; --ds-warn: #C68A14; --ds-warn-tint: #FBF1DA; --ds-crit: #C0392B; --ds-crit-tint: #FBE6E3; --ds-info: #2A6FB6; --ds-info-tint: #E1ECF7; --ds-mute-tint: #EAE7DD; /* ------- Focus ring ------- */ --ds-focus: #7BB020; --ds-focus-ring: 0 0 0 3px rgba(123, 176, 32, 0.28); /* ------- Elevation ------- */ --ds-shadow-1: 0 1px 2px rgba(20, 25, 12, 0.05); --ds-shadow-2: 0 4px 12px -4px rgba(20, 25, 12, 0.10); --ds-shadow-3: 0 12px 28px -10px rgba(20, 25, 12, 0.14); --ds-shadow-popover:0 16px 40px -8px rgba(20, 25, 12, 0.18), 0 0 0 1px var(--ds-rule); /* ------- Chart palette (sequential, 6-step) ------- */ --ds-chart-1: #5E841A; /* brand-deep */ --ds-chart-2: #2A6FB6; /* info */ --ds-chart-3: #C68A14; /* warn */ --ds-chart-4: #5A2D8C; /* purple */ --ds-chart-5: #A8331F; /* crit-deep */ --ds-chart-6: #2E5236; /* moss */ } [data-theme="dark"] { --ds-bg: #0E1013; --ds-bg-2: #14171C; --ds-surface: #14171C; --ds-surface-2: #1A1E24; --ds-surface-3: #232831; --ds-ink: #ECEEF1; --ds-ink-1: #B8BDC4; --ds-ink-2: #818892; --ds-ink-3: #5A616B; --ds-ink-inv: #0E1013; --ds-rule: #232831; --ds-rule-2: #2F3540; --ds-rule-strong: #ECEEF1; --ds-brand: #7BB020; --ds-brand-deep: #A6E22E; /* swap: deep becomes bright on dark */ --ds-brand-tint: #1F2A12; --ds-brand-bright: #A6E22E; --ds-ok: #6FBB47; --ds-ok-tint: #1A2412; --ds-warn: #E0A234; --ds-warn-tint: #2A2310; --ds-crit: #E55146; --ds-crit-tint: #2A1714; --ds-info: #5097E5; --ds-info-tint: #142233; --ds-mute-tint: #1A1E24; --ds-focus: #A6E22E; --ds-focus-ring: 0 0 0 3px rgba(166, 226, 46, 0.25); --ds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --ds-shadow-2: 0 4px 12px -4px rgba(0, 0, 0, 0.5); --ds-shadow-3: 0 12px 28px -10px rgba(0, 0, 0, 0.6); --ds-shadow-popover:0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--ds-rule-2); --ds-chart-1: #A6E22E; --ds-chart-2: #5097E5; --ds-chart-3: #E0A234; --ds-chart-4: #B89AE0; --ds-chart-5: #E55146; --ds-chart-6: #6FBB47; } :root { /* ============================================================ Tokens shared across themes (don't change with light/dark) ============================================================ */ /* ------- Type families ------- */ --ds-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --ds-font-serif: "Instrument Serif", "Times New Roman", serif; --ds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ------- Type scale (px) ------- */ --ds-fs-xs: 11px; --ds-fs-sm: 12px; --ds-fs-md: 13px; --ds-fs-base: 14px; --ds-fs-lg: 16px; --ds-fs-xl: 18px; --ds-fs-2xl: 20px; --ds-fs-3xl: 24px; --ds-fs-4xl: 32px; --ds-fs-5xl: 44px; --ds-fs-6xl: 64px; /* ------- Line heights ------- */ --ds-lh-tight: 1.15; --ds-lh-snug: 1.3; --ds-lh-base: 1.55; --ds-lh-relax: 1.7; /* ------- Letter-spacing ------- */ --ds-tr-display: -0.022em; --ds-tr-head: -0.012em; --ds-tr-base: 0; --ds-tr-mono: 0.01em; --ds-tr-caps: 0.08em; /* ------- Space scale (4-based, fibonacci-ish) ------- */ --ds-s-0: 0; --ds-s-1: 4px; --ds-s-2: 8px; --ds-s-3: 12px; --ds-s-4: 16px; --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-7: 32px; --ds-s-8: 40px; --ds-s-9: 48px; --ds-s-10: 64px; --ds-s-11: 80px; --ds-s-12: 96px; /* ------- Radius ------- */ --ds-r-xs: 3px; --ds-r-sm: 6px; --ds-r-md: 8px; --ds-r-lg: 12px; --ds-r-xl: 16px; --ds-r-full: 9999px; /* ------- Borders ------- */ --ds-bw-1: 1px; --ds-bw-2: 2px; /* ------- Heights (control sizes) ------- */ --ds-h-xs: 22px; --ds-h-sm: 28px; --ds-h-md: 34px; --ds-h-lg: 40px; --ds-h-xl: 48px; /* ------- Motion ------- */ --ds-dur-instant: 80ms; --ds-dur-fast: 120ms; --ds-dur: 180ms; --ds-dur-slow: 260ms; --ds-dur-deep: 420ms; --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ds-ease-in: cubic-bezier(0.4, 0, 1, 1); --ds-ease-out: cubic-bezier(0, 0, 0.2, 1); --ds-ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1); /* ------- Z-index ------- */ --ds-z-base: 1; --ds-z-raised: 10; --ds-z-sticky: 100; --ds-z-overlay: 800; --ds-z-modal: 900; --ds-z-toast: 950; --ds-z-tooltip: 1000; }