/* ============================================================ * Our Family Tree — Base styles * * Themed via CSS custom properties. Light is the default at :root, * dark overrides apply when . * THIS FILE MUST LOAD FIRST — every other file references these vars. * ============================================================ */ :root { /* Surfaces */ --bg-page: #f0ece4; --bg-surface: #fff; --bg-surface-alt: #fafaf7; --bg-input: #fff; --bg-header: #1a1a2e; --bg-tree: #f8f5f0; --bg-hover-soft: #f4fdf6; --bg-result-hover: #f4fdf6; --bg-anc-card: #f8f5f0; --bg-overlay-modal: rgba(26, 26, 46, 0.85); --bg-overlay-loading: rgba(240, 236, 228, 0.92); /* Text */ --text-primary: #2c2c2c; --text-secondary: #555; --text-muted: #888; --text-faint: #aaa; --text-dim: #999; --text-soft: #666; --text-soft-2: #777; --text-heading: #1a1a2e; /* dark "title" text on light bg */ --text-body-2: #444; --text-on-accent: #fff; --text-on-header: #fff; --text-faintest: #bbb; /* Brand accent */ --accent: #4a7c59; --accent-hover: #3a6147; --accent-active: #2d4f38; --accent-soft: #edf7f0; --accent-softer: #f4fdf6; --accent-border: #c8d8c8; --accent-border-soft: #e0ecde; --accent-self-bg: #d4edda; --accent-self-text: #3a6147; --accent-link-soft: #2c4a36; /* Tag chip & aka pill */ --tag-chip-bg: #e5efe6; --tag-chip-fg: #3a6b48; --tag-chip-border: #c8dbcc; --aka-bg: #f4f1ea; --note-bg: #f9faf7; --note-bg-2: #f7faf7; --note-border: #c8d8c8; /* Sex badges */ --sex-m-bg: #dbeeff; --sex-m-fg: #1a5c9e; --sex-f-bg: #ffe4f0; --sex-f-fg: #9e1a5c; --sex-m-bar: #4a90d9; --sex-f-bar: #d94a90; --sex-u-bar: #c8bfb0; /* Borders */ --border: #ddd6cc; --border-strong: #d0c8bc; --border-soft: #e0d8ce; --border-faint: #eee; --border-pale: #ececec; --border-bw: #ddd; --border-btn-back: #bbb; /* Danger */ --danger: #c0392b; --danger-text: #a14444; /* Famous Kin */ --fk-chip-bg: #f8f5ef; --fk-btn-bg: #f8fbf9; --fk-btn-border: #b8c8be; --fk-row-border: #e0ecde; --fk-bg-tint: rgba(0, 0, 0, 0.08); --fk-bg-tint-on: rgba(255, 255, 255, 0.22); /* Tree canvas (read by code.js) */ --tree-edge-blood: #c0b8aa; --tree-edge-spouse: #4a7c59; --tree-node-bg: #ffffff; --tree-node-focus: #edf7f0; --tree-node-hover: #f4fdf6; --tree-node-border: #d0c8bc; --tree-node-border-on: #4a7c59; --tree-node-name: #1a1a2e; --tree-node-life: #888; --tree-dot: #bbb; /* Header transparent layers */ --header-nav-border: rgba(255, 255, 255, 0.25); --header-nav-text: rgba(255, 255, 255, 0.75); --header-nav-hover: rgba(255, 255, 255, 0.6); /* Shadows */ --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.1); --shadow-results: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.4); --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-result: 0 2px 8px rgba(0, 0, 0, 0.04); /* Misc */ --progress-bg: #e0d8ce; } :root[data-theme="dark"] { --bg-page: #15191d; --bg-surface: #1e242a; --bg-surface-alt: #232930; --bg-input: #161a1e; --bg-header: #0e1216; --bg-tree: #1a1f24; --bg-hover-soft: #233028; --bg-result-hover: #233028; --bg-anc-card: #232930; --bg-overlay-modal: rgba(0, 0, 0, 0.85); --bg-overlay-loading: rgba(0, 0, 0, 0.7); --text-primary: #e5e7e6; --text-secondary: #b8bcba; --text-muted: #8a8e8c; --text-faint: #6a6e6c; --text-dim: #7a7e7c; --text-soft: #a8acaa; --text-soft-2: #9a9e9c; --text-heading: #e8eaeb; --text-body-2: #cfd2d0; --text-on-accent: #fff; --text-on-header: #e5e7e6; --text-faintest: #5a5e5c; --accent: #6fa67e; --accent-hover: #84bd93; --accent-active: #5a9168; --accent-soft: #1f2e25; --accent-softer: #1a2620; --accent-border: #355a44; --accent-border-soft: #2a3f33; --accent-self-bg: #1f3a26; --accent-self-text: #84bd93; --accent-link-soft: #a8d8b5; --tag-chip-bg: #1f2e25; --tag-chip-fg: #84bd93; --tag-chip-border: #355a44; --aka-bg: #262a2c; --note-bg: #1a1e22; --note-bg-2: #1a1e22; --note-border: #355a44; --sex-m-bg: #1a2a3a; --sex-m-fg: #6aa6e0; --sex-f-bg: #3a1a2a; --sex-f-fg: #e07aae; --sex-m-bar: #5fa6e8; --sex-f-bar: #e85fa6; --sex-u-bar: #5a5e5c; --border: #2a3035; --border-strong: #353c42; --border-soft: #232930; --border-faint: #232930; --border-pale: #232930; --border-bw: #2a3035; --border-btn-back: #353c42; --danger: #e57463; --danger-text: #e88477; --fk-chip-bg: #232930; --fk-btn-bg: #1f2e25; --fk-btn-border: #355a44; --fk-row-border: #2a3f33; --fk-bg-tint: rgba(0, 0, 0, 0.35); --fk-bg-tint-on: rgba(255, 255, 255, 0.18); --tree-edge-blood: #4a5158; --tree-edge-spouse: #6fa67e; --tree-node-bg: #1e242a; --tree-node-focus: #1f2e25; --tree-node-hover: #233028; --tree-node-border: #353c42; --tree-node-border-on: #6fa67e; --tree-node-name: #e5e7e6; --tree-node-life: #8a8e8c; --tree-dot: #5a5e5c; --header-nav-border: rgba(255, 255, 255, 0.18); --header-nav-text: rgba(255, 255, 255, 0.65); --header-nav-hover: rgba(255, 255, 255, 0.85); --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-results: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.7); --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.55); --shadow-result: 0 2px 8px rgba(0, 0, 0, 0.3); --progress-bg: #2a3035; } /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg-page); color: var(--text-primary); line-height: 1.5; min-height: 100vh; } /* ---- Utility ---- */ .hidden { display: none !important; }