/* Forest Design System — CSS Custom Properties * Light theme ("Day Forest") is the default. * Dark theme ("Night Forest") activates via .dark class on . */ :root { /* Backgrounds */ --bg-primary: #FAF8F5; --bg-secondary: #F2EDE7; --bg-tertiary: #E8E0D6; --bg-elevated: #FFFFFF; --bg-sunbeam: #FFF9F0; /* Text */ --text-primary: #2C2416; --text-secondary: #6B5D4F; --text-tertiary: #9C8E7E; --text-inverse: #FAF8F5; /* Borders */ --border-subtle: #E2D9CE; --border-default: #D1C5B6; --border-strong: #B5A694; /* Node types */ --node-hypothetical: #4A7C59; --node-hypothetical-subtle: #EEF5F0; --node-hypothetical-strong: #3A6346; --node-fact: #B8860B; --node-fact-subtle: #FDF5E6; --node-fact-strong: #9A7209; --node-assumption: #8B7DA8; --node-assumption-subtle: #F2EFF7; --node-assumption-strong: #705F8E; --node-metric: #4A8BA8; --node-metric-subtle: #EBF4F8; --node-metric-strong: #3A7490; --node-event: #3A8A7A; --node-event-subtle: #EAF5F3; --node-event-strong: #2E7266; --node-operator: #8B6F47; --node-operator-subtle: #F5F0E8; --node-operator-strong: #735A38; --node-forecast: #8B4A4A; --node-forecast-subtle: #F5EDED; --node-forecast-strong: #733C3C; --node-proposal: #5A6FA8; --node-proposal-subtle: #EEF0F7; --node-proposal-strong: #485B8E; --node-comment: #7A8A8A; --node-comment-subtle: #F0F3F3; --node-comment-strong: #637272; /* Relationships */ --rel-edge: #7A8B7A; --rel-edge-subtle: #EFF2EF; /* Probability spectrum */ --prob-very-low: #5B7FA5; --prob-low: #6C94A8; --prob-moderate: #8A9A7C; --prob-even: #A89E5C; --prob-high: #C4943A; --prob-very-high: #C47A2A; /* Status */ --status-healthy: #5A8A5A; --status-warning: #C49A3A; --status-error: #B84A4A; --status-pending: #7A7A9A; --status-inactive: #9A9A8A; /* Actions */ --action-primary: #3D7A6A; --action-primary-hover: #326656; --action-secondary: #6B5D4F; --action-secondary-hover: #5A4D40; --action-destructive: #A64040; --action-destructive-hover: #8E3535; --focus-ring: #3D7A6A40; /* Typography */ --font-display: "DM Sans", "Avenir Next", sans-serif; --font-body: "Source Sans 3", "Segoe UI", sans-serif; --font-data: "JetBrains Mono", "SF Mono", "Cascadia Code", monospace; /* Type scale */ --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* Border radius */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-full: 9999px; /* Shadows — warm-toned (sunlight) */ --shadow-sm: 0 1px 2px rgba(44, 36, 22, 0.06); --shadow-md: 0 2px 8px rgba(44, 36, 22, 0.08), 0 1px 2px rgba(44, 36, 22, 0.04); --shadow-lg: 0 8px 24px rgba(44, 36, 22, 0.10), 0 2px 8px rgba(44, 36, 22, 0.06); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease-out; } /* Dark theme — "Night Forest" * Activates via: browser prefers-color-scheme, OR .dark class on . * The .dark class (set by cookie/JS) takes priority for manual override. * The .light class forces light theme even if OS prefers dark. */ @media (prefers-color-scheme: dark) { :root:not(.light) { --bg-primary: #161B1A; --bg-secondary: #1C2322; --bg-tertiary: #242D2B; --bg-elevated: #2A3533; --bg-sunbeam: #1E2826; --text-primary: #E4DDD4; --text-secondary: #9E9589; --text-tertiary: #6B6358; --text-inverse: #161B1A; --border-subtle: #2E3937; --border-default: #3A4744; --border-strong: #4D5C58; --node-hypothetical: #6DAF7B; --node-hypothetical-subtle: #1D2E23; --node-hypothetical-strong: #8FCC9C; --node-fact: #DAA520; --node-fact-subtle: #2A2210; --node-fact-strong: #F0C040; --node-assumption: #A594C0; --node-assumption-subtle: #221E2C; --node-assumption-strong: #BBA8D8; --node-metric: #5EAAC8; --node-metric-subtle: #182830; --node-metric-strong: #7EC4DF; --node-event: #52B0A0; --node-event-subtle: #182A26; --node-event-strong: #6CCABA; --node-operator: #A8875C; --node-operator-subtle: #251F16; --node-operator-strong: #C4A070; --node-forecast: #B06565; --node-forecast-subtle: #2C1A1A; --node-forecast-strong: #CC7E7E; --node-proposal: #7A8FC8; --node-proposal-subtle: #1A1E2C; --node-proposal-strong: #94A8DF; --node-comment: #8A9E9E; --node-comment-subtle: #1C2626; --node-comment-strong: #A0B4B4; --rel-edge: #8A9E8A; --rel-edge-subtle: #1E2A1E; --prob-very-low: #4A6D91; --prob-low: #5A8498; --prob-moderate: #7A8E6C; --prob-even: #BEB468; --prob-high: #D4A44A; --prob-very-high: #D89038; --status-healthy: #6B9E6B; --status-warning: #D4AA4A; --status-error: #CC6060; --status-pending: #8A8AAA; --status-inactive: #6A6A5E; --action-primary: #5AAA90; --action-primary-hover: #6BBBA1; --action-secondary: #9E9589; --action-secondary-hover: #B0A79A; --action-destructive: #CC6060; --action-destructive-hover: #DD7070; --focus-ring: #5AAA9040; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20); } } /* Manual dark override via .dark class */ .dark { --bg-primary: #161B1A; --bg-secondary: #1C2322; --bg-tertiary: #242D2B; --bg-elevated: #2A3533; --bg-sunbeam: #1E2826; --text-primary: #E4DDD4; --text-secondary: #9E9589; --text-tertiary: #6B6358; --text-inverse: #161B1A; --border-subtle: #2E3937; --border-default: #3A4744; --border-strong: #4D5C58; --node-hypothetical: #6DAF7B; --node-hypothetical-subtle: #1D2E23; --node-hypothetical-strong: #8FCC9C; --node-fact: #DAA520; --node-fact-subtle: #2A2210; --node-fact-strong: #F0C040; --node-assumption: #A594C0; --node-assumption-subtle: #221E2C; --node-assumption-strong: #BBA8D8; --node-metric: #5EAAC8; --node-metric-subtle: #182830; --node-metric-strong: #7EC4DF; --node-event: #52B0A0; --node-event-subtle: #182A26; --node-event-strong: #6CCABA; --node-operator: #A8875C; --node-operator-subtle: #251F16; --node-operator-strong: #C4A070; --node-forecast: #B06565; --node-forecast-subtle: #2C1A1A; --node-forecast-strong: #CC7E7E; --node-proposal: #7A8FC8; --node-proposal-subtle: #1A1E2C; --node-proposal-strong: #94A8DF; --node-comment: #8A9E9E; --node-comment-subtle: #1C2626; --node-comment-strong: #A0B4B4; --rel-edge: #8A9E8A; --rel-edge-subtle: #1E2A1E; --prob-very-low: #4A6D91; --prob-low: #5A8498; --prob-moderate: #7A8E6C; --prob-even: #BEB468; --prob-high: #D4A44A; --prob-very-high: #D89038; --status-healthy: #6B9E6B; --status-warning: #D4AA4A; --status-error: #CC6060; --status-pending: #8A8AAA; --status-inactive: #6A6A5E; --action-primary: #5AAA90; --action-primary-hover: #6BBBA1; --action-secondary: #9E9589; --action-secondary-hover: #B0A79A; --action-destructive: #CC6060; --action-destructive-hover: #DD7070; --focus-ring: #5AAA9040; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.20); } /* Chevron tag for relationship types — angular shape to distinguish from rounded node badges */ .rel-tag { clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%); padding: 0.2rem 1rem; display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; } .rel-tag-sm { clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0% 50%); padding: 0.125rem 0.75rem; display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; }