/* static/colors.css Claude.ai-inspired dark palette + reusable primitives ---------------------------------------------------- */ /* ====== Design Tokens (Dark is default) ====== */ :root { /* Palette */ --bg: #121212; /* app background (near-black) */ --bg-elevated: #181818; /* panels / cards */ --surface: #1c1c1c; /* slightly lighter surface */ --border: #2a2a2a; /* subtle borders/dividers */ --text: #e6e2dc; /* primary text (soft cream) */ --text-muted: #b8b3ab; /* secondary text */ --heading: #f5f1e9; /* headings (brighter cream) */ --accent: #c8a47e; /* warm gold accent (links, focus) */ --accent-600: #b89067; /* hover */ --accent-700: #a67f55; /* active */ --accent-contrast: #1a1208; /* contrast text on accent bg */ --success: #71c291; --warning: #e3b062; --danger: #e36b6b; /* Effects */ --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); --shadow-1: 0 1px 3px rgba(0,0,0,0.4); --shadow-2: 0 6px 20px rgba(0,0,0,0.35); /* Rounding & layout */ --radius: 12px; --radius-sm: 8px; --radius-lg: 20px; --container: 1100px; /* Typography */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Sizing scale */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; } /* Optional Light Theme (enable via ) */ body[data-theme="light"] { --bg: #f7f6f3; --bg-elevated: #fffdfa; --surface: #fffaf3; --border: #e7e1d7; --text: #2a2a2a; --text-muted: #5d5a54; --heading: #1e1e1e; --accent: #a77444; --accent-600: #98683a; --accent-700: #83582f; --accent-contrast: #ffffff; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } /* Respect OS preference if you want the site to auto-switch (remove this block if you prefer forcing dark) */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f7f6f3; --bg-elevated: #fffdfa; --surface: #fffaf3; --border: #e7e1d7; --text: #2a2a2a; --text-muted: #5d5a54; --heading: #1e1e1e; --accent: #a77444; --accent-600: #98683a; --accent-700: #83582f; --accent-contrast: #ffffff; --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } } /* ====== Base Elements ====== */ html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--heading); line-height: 1.25; letter-spacing: -0.01em; } p { margin: 0 0 var(--space-4); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-600); text-decoration: underline; } a:active { color: var(--accent-700); } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--heading); } /* Scrollbar (Chromium/WebKit) */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #2b2b2b; border-radius: 999px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: #343434; } *::-webkit-scrollbar-track { background: var(--bg); } /* Focus ring */ :where(a, button, input, textarea, select, summary):focus-visible { outline: none; box-shadow: var(--ring); border-radius: calc(var(--radius-sm)); } /* ====== Reusable Layout Primitives ====== */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); } .surface { background: linear-gradient(180deg, var(--bg-elevated), var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-1); } .card { composes: surface; padding: var(--space-6); border-radius: var(--radius); box-shadow: var(--shadow-2); } .border { border: 1px solid var(--border); } .rounded { border-radius: var(--radius); } .muted { color: var(--text-muted); } /* Spacing utilities (add as needed) */ .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } /* ====== Controls ====== */ .btn { --_bg: var(--bg-elevated); --_fg: var(--text); display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--_bg); color: var(--_fg); cursor: pointer; transition: transform .05s ease, background .15s ease, color .15s ease, border-color .15s ease; } .btn:hover { background: var(--surface); } .btn:active { transform: translateY(1px); } .btn.primary { --_bg: color-mix(in srgb, var(--accent) 18%, var(--accent-contrast)); --_fg: var(--heading); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); } .btn.primary:hover { background: var(--accent-600); color: white; } .btn.primary:active { background: var(--accent-700); } .btn.ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn.ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .btn.outline { background: transparent; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .btn.outline:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* Inputs */ input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; } input::placeholder, textarea::placeholder { color: var(--text-muted); } label { color: var(--text-muted); font-size: .95rem; } /* Code blocks */ code, pre { font-family: var(--font-mono); background: #0f0f0f; color: #f0ede7; border: 1px solid #252525; border-radius: var(--radius-sm); } code { padding: .15rem .35rem; } pre { padding: var(--space-4); overflow:auto; } /* Tables */ table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); background: var(--bg-elevated); } th, td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); } thead th { color: var(--heading); text-align: left; } /* Badges / Pills */ .badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .75rem; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); } .badge.accent { background: var(--accent); color: var(--accent-contrast); border-color: transparent; } .badge.success { background: color-mix(in srgb, var(--success) 25%, var(--bg-elevated)); color: var(--success); } .badge.warn { background: color-mix(in srgb, var(--warning) 25%, var(--bg-elevated)); color: var(--warning); } .badge.danger { background: color-mix(in srgb, var(--danger) 25%, var(--bg-elevated)); color: var(--danger); }