/* ═══════════════════════════════════════════════════════════════ * LDP Design Tokens — Professional B2B SaaS palette * Inspired by shadcn/ui + Shopify Polaris + IBM Carbon * Supports light + dark mode via data-theme attribute on * ═══════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { /* ── Neutral scale ─────────────────────────────────────── */ --color-gray-50: #F8FAFC; --color-gray-100: #F1F5F9; --color-gray-200: #E2E8F0; --color-gray-300: #CBD5E1; --color-gray-400: #94A3B8; --color-gray-500: #64748B; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1E293B; --color-gray-900: #0F172A; --color-gray-950: #020617; /* ── Semantic surfaces ─────────────────────────────────── */ --surface-base: #FFFFFF; /* page background */ --surface-elevated: #FFFFFF; /* cards, sidebar */ --surface-sunken: #F8FAFC; /* main content area */ --surface-hover: #F1F5F9; --surface-active: #E2E8F0; /* ── Borders ───────────────────────────────────────────── */ --border-default: #E2E8F0; --border-muted: #F1F5F9; --border-strong: #CBD5E1; --border-focus: #3B82F6; /* ── Text ──────────────────────────────────────────────── */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #94A3B8; --text-disabled: #CBD5E1; --text-on-accent: #FFFFFF; /* ── Accent (brand) ─────────────────────────────────────── */ --accent-50: #EFF6FF; --accent-100: #DBEAFE; --accent-200: #BFDBFE; --accent-300: #93C5FD; --accent-400: #60A5FA; --accent-500: #3B82F6; --accent-600: #2563EB; /* primary */ --accent-700: #1D4ED8; --accent-800: #1E40AF; --accent-900: #1E3A8A; /* ── Semantic colors ────────────────────────────────────── */ --color-success-50: #F0FDF4; --color-success-100: #DCFCE7; --color-success-500: #22C55E; --color-success-600: #16A34A; --color-success-700: #15803D; --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-500: #F59E0B; --color-warning-600: #D97706; --color-warning-700: #B45309; --color-danger-50: #FEF2F2; --color-danger-100: #FEE2E2; --color-danger-500: #EF4444; --color-danger-600: #DC2626; --color-danger-700: #B91C1C; --color-info-50: #EFF6FF; --color-info-100: #DBEAFE; --color-info-500: #3B82F6; --color-info-600: #2563EB; /* ── Shadows ───────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06); } :root[data-theme="dark"] { /* ── Neutral scale (inverted) ──────────────────────────── */ --color-gray-50: #0F172A; --color-gray-100: #1E293B; --color-gray-200: #334155; --color-gray-300: #475569; --color-gray-400: #64748B; --color-gray-500: #94A3B8; --color-gray-600: #CBD5E1; --color-gray-700: #E2E8F0; --color-gray-800: #F1F5F9; --color-gray-900: #F8FAFC; --color-gray-950: #FFFFFF; /* ── Semantic surfaces ─────────────────────────────────── */ --surface-base: #0B1220; /* darker than gray-900 */ --surface-elevated: #0F172A; --surface-sunken: #020617; --surface-hover: #1E293B; --surface-active: #334155; /* ── Borders ───────────────────────────────────────────── */ --border-default: #1E293B; --border-muted: #0F172A; --border-strong: #334155; --border-focus: #60A5FA; /* ── Text ──────────────────────────────────────────────── */ --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-tertiary: #64748B; --text-disabled: #475569; --text-on-accent: #FFFFFF; /* Accents stay the same, but adjust primary for dark */ --accent-600: #3B82F6; --accent-700: #60A5FA; /* Semantic colors — slightly muted for dark */ --color-success-100: rgba(34, 197, 94, 0.15); --color-success-700: #4ADE80; --color-warning-100: rgba(245, 158, 11, 0.15); --color-warning-700: #FBBF24; --color-danger-100: rgba(239, 68, 68, 0.15); --color-danger-700: #F87171; --color-info-100: rgba(59, 130, 246, 0.15); /* Shadows — much subtler on dark */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); } /* ════════════════════════════════════════════════════════════ * Typography * ════════════════════════════════════════════════════════════ */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Courier New', monospace; /* Type scale — perfect fourth (1.333) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px — default for UI */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.375rem; /* 22px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2.25rem; /* 36px */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.6; /* Weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; } /* ════════════════════════════════════════════════════════════ * Spacing (4px grid) * ════════════════════════════════════════════════════════════ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ } /* ════════════════════════════════════════════════════════════ * Radii + Transitions + Layout * ════════════════════════════════════════════════════════════ */ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Layout */ --sidebar-width: 240px; --sidebar-width-collapsed: 60px; --topbar-height: 56px; --content-max-width: 1600px; } /* ════════════════════════════════════════════════════════════ * Global resets + base * ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-sans); font-size: 16px; color-scheme: light dark; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--surface-sunken); color: var(--text-primary); font-size: var(--text-base); line-height: var(--leading-normal); height: 100vh; overflow: hidden; transition: background-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; } /* Keyboard shortcut badge */ kbd { display: inline-block; padding: 1px 6px; background: var(--surface-hover); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); line-height: 1.4; } /* Scrollbars — subtle */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; border: 2px solid transparent; } /* Selection */ ::selection { background: var(--accent-200); color: var(--text-primary); } /* Focus ring — accessibility */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }