@import "tailwindcss"; /* ═══════════════════════════════════════════════════════════════ CodingCat.dev Design System — Tailwind CSS 4 Theme Tokens Dark-first brand: black bg, white text, violet accent ═══════════════════════════════════════════════════════════════ */ @theme { /* ─── Brand Core ─── */ --color-primary: #7c3aed; --color-primary-hover: #6d28d9; --color-primary-light: #8b5cf6; --color-primary-muted: #7c3aed33; --color-secondary: #06b6d4; --color-secondary-hover: #0891b2; --color-accent: #f59e0b; --color-accent-hover: #d97706; --color-destructive: #ef4444; --color-destructive-hover: #dc2626; /* ─── Content Type Colors ─── */ --color-type-blog: #3b82f6; --color-type-podcast: #f59e0b; --color-type-course: #10b981; --color-type-video: #ef4444; --color-type-short: #ec4899; /* ─── Code Block Colors ─── */ --color-code-bg: #0d1117; --color-code-border: #30363d; --color-code-text: #e6edf3; /* ─── Typography ─── */ --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* ─── Border Radius ─── */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; /* ─── Transitions ─── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* ─── Shadows ─── */ --shadow-glow: 0 0 20px rgba(124, 58, 237, 0.15); --shadow-glow-lg: 0 0 40px rgba(124, 58, 237, 0.25); } /* ═══════════════════════════════════════════════════════════════ Theme Variables — Dark mode is DEFAULT Switch to light via ═══════════════════════════════════════════════════════════════ */ :root { --bg: #000000; --bg-secondary: #0a0a0a; --bg-tertiary: #141414; --surface: #1a1a1a; --surface-hover: #222222; --surface-raised: #262626; --border: #262626; --border-hover: #404040; --border-focus: #7c3aed; --text: #ffffff; --text-secondary: #a3a3a3; --text-tertiary: #737373; --text-inverse: #000000; --muted: #262626; --muted-fg: #a3a3a3; color-scheme: dark; } html.light { --bg: #ffffff; --bg-secondary: #fafafa; --bg-tertiary: #f5f5f5; --surface: #ffffff; --surface-hover: #f5f5f5; --surface-raised: #ffffff; --border: #e5e5e5; --border-hover: #d4d4d4; --border-focus: #7c3aed; --text: #0a0a0a; --text-secondary: #525252; --text-tertiary: #a3a3a3; --text-inverse: #ffffff; --muted: #f5f5f5; --muted-fg: #737373; color-scheme: light; } /* ═══════════════════════════════════════════════════════════════ Base Styles ═══════════════════════════════════════════════════════════════ */ html { font-family: var(--font-sans); background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; background-color: var(--bg); } /* Focus ring — consistent across all interactive elements */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Selection color */ ::selection { background-color: var(--color-primary-muted); color: var(--text); } /* Scrollbar styling (dark mode friendly) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════════ Prose / Article Styles ═══════════════════════════════════════════════════════════════ */ .prose { color: var(--text-secondary); line-height: 1.7; font-size: 1.125rem; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--text); font-weight: 700; line-height: 1.3; margin-top: 2em; margin-bottom: 0.75em; } .prose h1 { font-size: 2.25rem; } .prose h2 { font-size: 1.875rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .prose h3 { font-size: 1.5rem; } .prose h4 { font-size: 1.25rem; } .prose p { margin-bottom: 1.25em; } .prose a { color: var(--color-primary-light); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } .prose a:hover { color: var(--color-primary); } .prose code { font-family: var(--font-mono); font-size: 0.875em; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.125em 0.375em; } .prose pre { margin: 1.5em 0; } .prose pre code { background: none; border: none; padding: 0; font-size: 0.875rem; } .prose img { border-radius: var(--radius-lg); border: 1px solid var(--border); margin: 1.5em 0; } .prose blockquote { border-left: 4px solid var(--color-primary); padding-left: 1.5rem; margin: 1.5em 0; font-style: italic; color: var(--text); } .prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1.25em; } .prose li { margin-bottom: 0.5em; } .prose ul li::marker { color: var(--color-primary); } .prose ol li::marker { color: var(--text-tertiary); font-weight: 600; } .prose hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } .prose th, .prose td { border: 1px solid var(--border); padding: 0.75rem 1rem; text-align: left; } .prose th { background-color: var(--surface); color: var(--text); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ Reduced Motion ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }