/* ============================================================ BareTools Design Tokens v1 — Single source of truth for visual primitives — Loaded BEFORE all other stylesheets ============================================================ */ /* ===== Light theme (default) ===== */ :root { /* --- Brand / Accent: Cyan-blue, single accent --------------- */ --accent-50: oklch(0.97 0.03 200); --accent-100: oklch(0.93 0.06 200); --accent-200: oklch(0.86 0.10 200); --accent-300: oklch(0.76 0.14 200); --accent-400: oklch(0.66 0.16 200); --accent-500: oklch(0.58 0.16 200); /* base accent */ --accent-600: oklch(0.50 0.15 200); --accent-700: oklch(0.43 0.13 200); --accent-800: oklch(0.36 0.10 200); --accent-900: oklch(0.28 0.07 200); --accent: var(--accent-600); --accent-hover: var(--accent-700); --accent-strong:var(--accent-700); --accent-soft: color-mix(in oklch, var(--accent-500) 12%, transparent); --accent-ring: var(--accent-500); /* Semantic accents */ --success: oklch(0.55 0.16 145); --warning: oklch(0.70 0.18 75); --danger: oklch(0.55 0.20 25); --info: var(--accent-500); /* --- Neutrals: warm-cool grey, tinted toward accent hue ----- */ --grey-50: oklch(0.985 0.006 210); --grey-100: oklch(0.965 0.008 210); --grey-200: oklch(0.92 0.010 210); --grey-300: oklch(0.86 0.012 210); --grey-400: oklch(0.73 0.014 210); --grey-500: oklch(0.58 0.014 210); --grey-600: oklch(0.45 0.014 210); --grey-700: oklch(0.34 0.012 210); --grey-800: oklch(0.24 0.010 210); --grey-900: oklch(0.16 0.008 210); --grey-950: oklch(0.11 0.006 210); /* Backgrounds — off-white, not pure white */ --bg: var(--grey-50); --bg-secondary: var(--grey-100); --bg-tertiary: var(--grey-200); --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #ffffff; --bg-hover: var(--grey-100); --bg-active: var(--grey-200); --bg-overlay: oklch(0.16 0.008 210 / 0.5); /* Text — off-black, not pure black */ --text: var(--grey-900); --text-secondary: var(--grey-700); --text-tertiary: var(--grey-500); --text-muted: var(--grey-400); --text-inverse: var(--grey-50); --text-placeholder: var(--grey-400); --text-on-accent: #ffffff; /* Borders */ --border: var(--grey-200); --border-strong: var(--grey-300); --border-subtle: var(--grey-100); --border-accent: var(--accent-500); /* --- Type scale (clamp fluid, ~1.25 ratio) ------------------ */ --fs-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem); /* 12px base */ --fs-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem); /* 14px */ --fs-base: clamp(0.93rem, 0.90rem + 0.2vw, 1rem); /* 16px */ --fs-lg: clamp(1.05rem, 1.00rem + 0.3vw, 1.125rem); /* 18px */ --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem); /* 22px */ --fs-2xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.75rem); /* 28px */ --fs-3xl: clamp(1.9rem, 1.65rem + 1.2vw, 2.25rem); /* 36px */ --fs-4xl: clamp(2.4rem, 2.00rem + 2.0vw, 3rem); /* 48px */ --fs-display: clamp(2.5rem, 1.8rem + 3.5vw, 3.75rem); /* 60px max */ /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed:1.6; --lh-loose: 1.7; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Font families (inherit from loaded fonts) */ --font-display: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; /* --- Spacing scale (4px base) ------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Section vertical rhythm */ --section-gap: var(--space-16); --section-gap-lg: var(--space-20); /* --- Radius system ----------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius: 12px; /* default / cards */ --radius-lg: 16px; --radius-xl: 20px; /* max for large cards / hero elements */ --radius-full: 999px; /* --- Shadow system (soft, close-proximity) ----------------- */ --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.04); --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04); --shadow-md: 0 4px 8px oklch(0 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.04); --shadow-lg: 0 12px 24px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.04); --shadow-xl: 0 24px 48px oklch(0 0 0 / 0.12), 0 8px 16px oklch(0 0 0 / 0.06); --shadow-ring: 0 0 0 3px var(--accent-soft); /* --- Motion tokens ----------------------------------------- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.32, 0, 0.67, 0); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 280ms; /* --- Z-index scale (semantic) ------------------------------ */ --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1200; --z-toast: 1300; --z-tooltip: 1400; /* --- Layout ------------------------------------------------ */ --container: 1280px; --container-pad: var(--space-6); --nav-height: 64px; /* Measure: max line length for comfortable reading */ --measure: 68ch; } /* ===== Dark theme ===== */ [data-theme="dark"] { /* Accent — slightly brighter on dark */ --accent: var(--accent-400); --accent-hover: var(--accent-300); --accent-strong:var(--accent-300); --accent-soft: color-mix(in oklch, var(--accent-400) 18%, transparent); --accent-ring: var(--accent-400); --success: oklch(0.70 0.17 145); --warning: oklch(0.78 0.16 75); --danger: oklch(0.65 0.20 25); --info: var(--accent-400); /* Backgrounds — elevated surfaces get lighter (dark mode convention) */ --bg: var(--grey-950); --bg-secondary: var(--grey-900); --bg-tertiary: var(--grey-800); --bg-card: var(--grey-900); --bg-elevated: var(--grey-800); --bg-input: var(--grey-800); --bg-hover: var(--grey-800); --bg-active: var(--grey-700); --bg-overlay: oklch(0 0 0 / 0.6); /* Text */ --text: var(--grey-50); --text-secondary: var(--grey-200); --text-tertiary: var(--grey-400); --text-muted: var(--grey-500); --text-inverse: var(--grey-900); --text-placeholder: var(--grey-500); --text-on-accent: var(--grey-900); /* Borders */ --border: var(--grey-800); --border-strong: var(--grey-700); --border-subtle: var(--grey-850); /* derived */ --border-accent: var(--accent-400); /* Shadows — darker, less opacity */ --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.2); --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.3), 0 1px 2px oklch(0 0 0 / 0.2); --shadow-md: 0 4px 10px oklch(0 0 0 / 0.35), 0 2px 4px oklch(0 0 0 / 0.2); --shadow-lg: 0 12px 28px oklch(0 0 0 / 0.45), 0 4px 8px oklch(0 0 0 / 0.25); --shadow-xl: 0 24px 56px oklch(0 0 0 / 0.55), 0 8px 16px oklch(0 0 0 / 0.3); } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }