/* ============================================================================= DocTak — Unified Design System Variables ============================================================================= SINGLE source of truth for ALL CSS custom properties across the site. Load AFTER socialv.css, BEFORE all other custom CSS files. Sections: 1. Brand / Accent 2. Bootstrap Overrides (--bs-*) 3. Surfaces & Backgrounds 4. Text & Colors 5. Cards & Borders 6. Job Cards 7. Post Tints 8. Shadows 9. Radius 10. Dropdowns 11. Portal (guest pages) 12. Button Tokens (kimi-buttons) 13. Body ============================================================================= */ /* --------------------------------------------------------------------------- LIGHT MODE --------------------------------------------------------------------------- */ :root { /* 1. Brand / Accent ─────────────────────────────────────────────────────── */ --brand: #0EA5E9; --brand-rgb: 14, 165, 233; --brand-accent: #38BDF8; --brand-hover: #0284C7; --brand-active: #0369A1; --brand-border: rgba(14, 165, 233, 0.30); --brand-gradient: linear-gradient(140deg, #0EA5E9 0%, #14B8A6 100%); --brand-soft: rgba(14, 165, 233, 0.08); /* 2. Bootstrap Overrides ────────────────────────────────────────────────── */ --bs-blue: #0EA5E9; --bs-primary: #0EA5E9; --bs-primary-rgb: 14, 165, 233; --bs-primary-shade-80: #082F49; --bs-primary-shade-60: #0C4A6E; --bs-primary-shade-40: #075985; --bs-primary-shade-20: #0369A1; --bs-primary-tint-90: #F0F9FF; --bs-primary-tint-80: #E0F2FE; --bs-primary-tint-60: #BAE6FD; --bs-primary-tint-40: #7DD3FC; --bs-primary-tint-20: #38BDF8; --bs-success: #059669; --bs-success-rgb: 5, 150, 105; --bs-info: #8B5CF6; --bs-info-rgb: 139, 92, 246; --bs-warning: #F59E0B; --bs-warning-rgb: 245, 158, 11; --bs-danger: #EF4444; --bs-danger-rgb: 239, 68, 68; --bs-green: #059669; --bs-teal: #14B8A6; --bs-primary-text-emphasis: #0C4A6E; --bs-success-text-emphasis: #065F46; --bs-info-text-emphasis: #4C1D95; --bs-warning-text-emphasis: #78350F; --bs-danger-text-emphasis: #991B1B; --bs-primary-bg-subtle: #F0F9FF; --bs-success-bg-subtle: #ECFDF5; --bs-info-bg-subtle: #F5F3FF; --bs-warning-bg-subtle: #FFFBEB; --bs-danger-bg-subtle: #FEF2F2; --bs-primary-border-subtle: #BAE6FD; --bs-success-border-subtle: #A7F3D0; --bs-info-border-subtle: #DDD6FE; --bs-warning-border-subtle: #FDE68A; --bs-danger-border-subtle: #FECACA; --bs-body-bg: #F8FAFC; --bs-body-bg-rgb: 248, 250, 252; --bs-heading-color: #0F172A; --bs-border-color: #E2E8F0; --bs-link-color: #0EA5E9; --bs-link-color-rgb: 14, 165, 233; --bs-link-hover-color: #0284C7; --bs-link-hover-color-rgb: 2, 132, 199; --bs-focus-ring-color: rgba(14, 165, 233, 0.25); --bs-custom-card-bg: #FFFFFF; /* 3. Surfaces & Backgrounds ─────────────────────────────────────────────── */ --surface-base: #F8FAFC; --surface: #FFFFFF; --surface-alt: rgba(255, 255, 255, 0.8); --surface-muted: #F1F5F9; /* 4. Text & Colors ──────────────────────────────────────────────────────── */ --cs-color: #0F172A; --cs-color-sub: #64748B; --text-faint: #94A3B8; --link-color: var(--brand); /* 5. Cards & Borders ────────────────────────────────────────────────────── */ --cs-card-border-color: #E2E8F0; --cs-border-color: #E2E8F0; --cs-bg-white: var(--surface); --cs-card-header-bg: #F1F5F9; --cs-card-diff-bg: #F8FAFC; /* 6. Job Cards ──────────────────────────────────────────────────────────── */ --cs-job-card-btns-border-color: #E2E8F0; --cs-job-card-bg1: var(--surface); --cs-job-card-bg2: #F8FAFC; --cs-job-active-card-bg1: var(--surface); --cs-job-active-card-bg2: #F0F9FF; --cs-job-card-body: var(--surface); /* 7. Post Tints ─────────────────────────────────────────────────────────── */ --cs-post-color: rgba(14, 165, 233, 0.08); --cs-post-hover-color: rgba(14, 165, 233, 0.14); --image-on-hover-color: #E2E8F0; /* 8. Shadows ────────────────────────────────────────────────────────────── */ --signin-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06), 0 4px 12px -4px rgba(14, 165, 233, 0.08); --btn-shadow: 0 10px 28px -10px rgba(14, 165, 233, 0.55); --shadow-xs: 0 1px 2px -1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03); --shadow-sm: 0 1px 3px -1px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 16px -4px rgba(14, 165, 233, 0.15), 0 4px 12px -6px rgba(0, 0, 0, 0.1); --shadow-focus: 0 0 0 3px rgba(14, 165, 233, 0.25); /* 9. Radius ─────────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 10px; --radius-xl: 32px; --btn-radius: 9999px; /* 10. Dropdowns ─────────────────────────────────────────────────────────── */ --dropdown-bg-color: var(--surface); --dropdown-border-color: var(--cs-card-border-color); --dropdown-shadow-color: rgba(14, 165, 233, 0.15); --dropdown-text-color: var(--cs-color); --dropdown-hover-bg-color: var(--surface-muted); --dropdown-hover-text-color: var(--brand); /* 11. Portal (guest pages) ──────────────────────────────────────────────── */ --portal-bg: #F8FAFC; --portal-surface: #FFFFFF; --portal-border: #E2E8F0; --portal-border-strong: #CBD5E1; --portal-heading: #0F172A; --portal-text: #334155; --portal-muted: #64748B; --portal-accent: var(--brand); --portal-accent-strong: var(--brand-hover); --portal-accent-soft: #E0F2FE; --portal-success: #059669; --portal-soft-green: #ECFDF5; --portal-shadow-sm: 0 1px 3px -1px rgba(0, 0, 0, 0.05); --portal-shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.1); /* 12. Button Tokens (kimi-buttons) ──────────────────────────────────────── */ --kimi: var(--brand); --kimi-hover: var(--brand-hover); --kimi-active: var(--brand-active); --kimi-rgb: 14, 165, 233; --kimi-soft: rgba(14, 165, 233, 0.08); --kimi-border: rgba(14, 165, 233, 0.30); /* 13. Body ──────────────────────────────────────────────────────────────── */ --bs-body-color: var(--cs-color); } /* --------------------------------------------------------------------------- DARK MODE --------------------------------------------------------------------------- */ [data-bs-theme="dark"], [data-theme="dark"] { color-scheme: dark; /* Brand (stays the same in dark, kimi aliases shift) */ /* Bootstrap Overrides */ --bs-body-color: #E2E8F0; --bs-body-color-rgb: 226, 232, 240; --bs-body-bg: #0f172a; --bs-body-bg-rgb: 15, 23, 42; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-heading-color: #ffffff; --bs-primary-text-emphasis: #7DD3FC; --bs-success-text-emphasis: #6EE7B7; --bs-info-text-emphasis: #C4B5FD; --bs-warning-text-emphasis: #FCD34D; --bs-danger-text-emphasis: #FCA5A5; --bs-primary-bg-subtle: #082F49; --bs-success-bg-subtle: #064E3B; --bs-info-bg-subtle: #2E1065; --bs-warning-bg-subtle: #78350F; --bs-danger-bg-subtle: #7F1D1D; --bs-primary-border-subtle: #075985; --bs-success-border-subtle: #047857; --bs-info-border-subtle: #7C3AED; --bs-warning-border-subtle: #B45309; --bs-danger-border-subtle: #B91C1C; --bs-link-color: #7DD3FC; --bs-link-hover-color: #BAE6FD; --bs-link-color-rgb: 125, 211, 252; --bs-link-hover-color-rgb: 186, 230, 253; --bs-border-color: #1E293B; --bs-border-color-translucent: rgba(255, 255, 255, 0.15); --bs-custom-card-bg: #0f172a; --bs-gray-900: #0f172a; --bs-gray-100: #1e293b; /* Surfaces & Backgrounds */ --surface-base: #0f172a; --surface: #1e293b; --surface-alt: rgba(30, 41, 59, 0.75); --surface-muted: #1E293B; --cs-bg-white: var(--surface); /* Text & Colors */ --cs-color: #FFFFFF; --cs-color-sub: #E2E8F0; --text-faint: #64748B; --card-bg: #1e293b; /* Cards & Borders */ --cs-card-header-bg: #1E293B; --cs-card-diff-bg: #1E293B; --cs-card-border-color: #1E293B; --cs-border-color: #1E293B; --cs-job-card-btns-border-color: #334155; /* Job Cards */ --cs-job-card-bg1: var(--surface); --cs-job-card-bg2: #1E293B; --cs-job-active-card-bg1: var(--surface); --cs-job-active-card-bg2: #1E293B; --cs-job-card-body: var(--surface); /* Post Tints */ --cs-post-color: rgba(14, 165, 233, 0.18); --cs-post-hover-color: rgba(14, 165, 233, 0.28); --image-on-hover-color: #1E293B; /* Shadows */ --shadow-xs: 0 1px 2px -1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03); --shadow-sm: 0 1px 3px -1px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 4px 16px -4px rgba(0, 0, 0, 0.5), 0 4px 12px -6px rgba(0, 0, 0, 0.4); /* Dropdowns */ --dropdown-bg-color: var(--surface-alt); --dropdown-border-color: #1E293B; --dropdown-shadow-color: rgba(0, 0, 0, 0.55); --dropdown-text-color: var(--cs-color); --dropdown-hover-bg-color: #1E293B; --dropdown-hover-text-color: var(--brand-accent); /* Portal (guest pages) */ --portal-bg: #0f172a; --portal-surface: #1e293b; --portal-border: #1E293B; --portal-border-strong: #334155; --portal-heading: #FFFFFF; --portal-text: #E2E8F0; --portal-muted: #94A3B8; --portal-accent: #38BDF8; --portal-accent-strong: #7DD3FC; --portal-accent-soft: rgba(14, 165, 233, 0.15); --portal-success: #34D399; --portal-soft-green: rgba(5, 150, 105, 0.15); /* Button Tokens (kimi-buttons) */ --kimi: #38BDF8; --kimi-hover: #0EA5E9; --kimi-active: #0284C7; --kimi-rgb: 56, 189, 248; --kimi-soft: rgba(56, 189, 248, 0.12); --kimi-border: rgba(56, 189, 248, 0.35); /* Body */ --bs-body-color: var(--cs-color); }