/* =========================================================================== KEEPVIDYA — Brand theme tokens (light + dark) Calm · trustworthy · local-first. Ink + copper. Usage: (default) or data-theme="dark". =========================================================================== */ :root { /* ---- Brand core (fixed, theme-independent) ---- */ --brand-ink: #1B2A33; --brand-slate: #33474F; --brand-copper: #C0703C; --brand-copper-l: #D98E5A; --brand-stone: #E7DFD4; --brand-paper: #FBF8F3; --brand-slate-300: #9DAAB3; /* ---- Neutral ramp (ink / slate) ---- */ --neutral-50: #F5F6F7; --neutral-100: #E8ECEE; --neutral-200: #CDD6DA; --neutral-300: #9DAAB3; --neutral-400: #6B7C85; --neutral-500: #4A5C65; --neutral-600: #33474F; --neutral-700: #25363D; --neutral-800: #1B2A33; --neutral-900: #121D23; /* ---- Copper ramp (accent) ---- */ --copper-50: #FBF1E9; --copper-100: #F4DCC8; --copper-200: #E8B894; --copper-300: #D98E5A; --copper-400: #C0703C; /* primary */ --copper-500: #A85E2E; --copper-600: #8A4C24; --copper-700: #6B3A1C; /* ---- Status (calm, desaturated) ---- */ --status-success: #3F7D5B; --status-warning: #C28A2E; --status-error: #B0463C; --status-info: #3E6B82; /* ---- Type (LOCKED) — use everywhere: web · docs · app ---- */ --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif; --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace; } /* ======================= LIGHT THEME (default) ======================= */ :root, [data-theme="light"] { color-scheme: light; --bg: #FBF8F3; /* app canvas */ --surface: #FFFFFF; /* cards, panels */ --surface-2: #F4F1EA; /* raised / sunken, hover rows */ --surface-3: #ECE6DC; /* deeper wells */ --border: #E4DBCE; /* hairlines, dividers */ --border-strong: #CDC2B0; --text: #1B2A33; /* primary */ --text-secondary:#4A5C65; --text-muted: #6B7C85; --text-inverse: #FBF8F3; --primary: #C0703C; /* copper */ --primary-hover: #A85E2E; --primary-active:#8A4C24; --on-primary: #FFFFFF; --primary-subtle:#FBF1E9; /* tinted backgrounds */ --primary-border:#E8B894; --focus-ring: #D98E5A; --link: #A85E2E; --success: #3F7D5B; --success-subtle: #E7F0EB; --warning: #C28A2E; --warning-subtle: #F8EFDD; --error: #B0463C; --error-subtle: #F7E5E2; --info: #3E6B82; --info-subtle: #E4EDF1; --shadow-sm: 0 1px 2px rgba(27,42,51,.06); --shadow-md: 0 4px 14px rgba(27,42,51,.10); } /* ========================= DARK THEME ========================= */ [data-theme="dark"] { color-scheme: dark; --bg: #121D23; /* foundation */ --surface: #1B2A33; --surface-2: #25363D; --surface-3: #2E4048; --border: #33474F; --border-strong: #45585F; --text: #F3EEE7; /* warm off-white */ --text-secondary:#B4C0C5; --text-muted: #7E8E96; --text-inverse: #121D23; --primary: #D98E5A; /* copper lifted for contrast */ --primary-hover: #E8A472; --primary-active:#C0703C; --on-primary: #121D23; /* dark text on copper */ --primary-subtle:#2A2118; /* warm-tinted dark well */ --primary-border:#7A4A2A; --focus-ring: #E8A472; --link: #E0A06E; --success: #5FA67D; --success-subtle: #1C2C24; --warning: #D9A94E; --warning-subtle: #2C2616; --error: #D46A5F; --error-subtle: #2E1C1A; --info: #6CA0B8; --info-subtle: #18272E; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 6px 20px rgba(0,0,0,.45); } /* ========================= Example bindings ========================= */ body { background: var(--bg); color: var(--text); font-family: var(--font-body); } h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); } .kp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); } .kp-muted { color: var(--text-muted); } .kp-btn { background: var(--primary); color: var(--on-primary); border: none; border-radius: 10px; padding: 9px 16px; font-weight: 600; cursor: pointer; } .kp-btn:hover{ background: var(--primary-hover); } .kp-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .kp-chip-live{ background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; } .kp-chip-next{ background: transparent; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; } a { color: var(--link); }