/* GeneoGraph Design System v3.3.0 — custom MD3-inspired semantic scheme */ /* Neutral Light / Neutral Charcoal Dark; hue ramps are approximate OKLab, not official HCT. */ :root { --gg-brand-seed: #2FAE74; } [data-theme="light"] { --gg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23515E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gg-select-chevron-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 7 5-5 5 5' fill='none' stroke='%23515E63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); color-scheme: light; /* Foundation surfaces, text, and global interaction */ --gg-background: #F2F3F4; --gg-topbar: #F8F9FA; --gg-sidebar: #F7F8F9; --gg-panel: #FCFCFD; --gg-details: #F7F8F9; --gg-raised: #FFFFFF; --gg-field: #FAFBFC; --gg-hover: #ECEFF1; --gg-border: #D8DEE1; --gg-outline: #718087; /* Shared control and Projects-specific semantic roles */ --gg-control-border: #87949B; --gg-create-tile-outline: #B8C2C7; --gg-disabled-surface: #F0F2F3; --gg-disabled-text: #637178; --gg-text: #202729; --gg-text-secondary: #515E63; --gg-text-muted: #637178; --gg-text-placeholder: #79888f; --gg-primary: #1C6B46; --gg-on-primary: #FFFFFF; --gg-selected: #DDEEE3; /* navigation / compact selected control */ --gg-selected-row: #E7F2E9; /* softer tint for wide table rows */ --gg-on-selected: #153D29; --gg-selected-border: #1C6B46; --gg-tree-canvas: #F1F2F3; --gg-tree-dots: #D3DADC; --gg-tip-background: #DDEEE3; --gg-tip-text: #1B2520; --gg-tip-border: #D6DED5; --gg-tip-link: #1C6B46; --gg-folder-face: #F2C94C; --gg-folder-fold: #B98A2C; /* Life-status dots are semantic: do not reuse action or archive accents. */ --gg-living-dot: #138652; --gg-deceased-dot: #697580; --gg-unknown-dot: #AD741D; --gg-scrollbar-thumb: #859098; --gg-scrollbar-thumb-hover: #6E7B81; --gg-tree-line: #768184; --gg-timeline-line: #A7B0B5; --gg-surface-bright: #FFFFFF; --gg-surface-dim: #E6E9EC; --gg-inverse-surface: #293136; --gg-inverse-on-surface: #FAFBFC; --gg-scrim: #000000; --gg-on-media: #FFFFFF; /* Material 3-style role aliases (GeneoGraph customized surfaces) */ --md-sys-color-primary: #1C6B46; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #A5F3C7; --md-sys-color-on-primary-container: #002111; --md-sys-color-secondary: #476554; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #C9EAD6; --md-sys-color-on-secondary-container: #042012; --md-sys-color-tertiary: #0F6875; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #A4EEFD; --md-sys-color-on-tertiary-container: #001F25; --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #F2F3F4; --md-sys-color-on-background: #202729; --md-sys-color-surface: #F2F3F4; --md-sys-color-on-surface: #202729; --md-sys-color-surface-dim: #E6E9EC; --md-sys-color-surface-bright: #FFFFFF; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F7F8F9; --md-sys-color-surface-container: #FCFCFD; --md-sys-color-surface-container-high: #ECEFF1; --md-sys-color-surface-container-highest: #E5E9EC; --md-sys-color-surface-tint: #1C6B46; --md-sys-color-surface-variant: #FAFBFC; --md-sys-color-on-surface-variant: #515E63; --md-sys-color-outline: #718087; --md-sys-color-outline-variant: #D8DEE1; --md-sys-color-inverse-surface: #293136; --md-sys-color-inverse-on-surface: #FAFBFC; --md-sys-color-inverse-primary: #89D7AB; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* Unified content accent families */ --gg-accent-heritage-green-accent: #1C6B46; --gg-accent-heritage-green-on-accent: #FFFFFF; --gg-accent-heritage-green-container: #DCEFE4; --gg-accent-heritage-green-on-container: #153D29; --gg-accent-heritage-green-subtle-container: #EBF5EE; --gg-accent-heritage-green-outline: #1C6B46; --gg-accent-creative-blue-accent: #00639B; --gg-accent-creative-blue-on-accent: #FFFFFF; --gg-accent-creative-blue-container: #D6EAF8; --gg-accent-creative-blue-on-container: #003754; --gg-accent-creative-blue-subtle-container: #E8F2F8; --gg-accent-creative-blue-outline: #00639B; --gg-accent-rose-sepia-accent: #90494C; --gg-accent-rose-sepia-on-accent: #FFFFFF; --gg-accent-rose-sepia-container: #F7DADB; --gg-accent-rose-sepia-on-container: #622B30; --gg-accent-rose-sepia-subtle-container: #F8EBEA; --gg-accent-rose-sepia-outline: #90494C; --gg-accent-sepia-gold-accent: #926600; --gg-accent-sepia-gold-on-accent: #FFFFFF; --gg-accent-sepia-gold-container: #FFF0CC; --gg-accent-sepia-gold-on-container: #563600; --gg-accent-sepia-gold-subtle-container: #FFF6E4; --gg-accent-sepia-gold-outline: #926600; --gg-accent-investigation-purple-accent: #6C4F9D; --gg-accent-investigation-purple-on-accent: #FFFFFF; --gg-accent-investigation-purple-container: #E9DDFB; --gg-accent-investigation-purple-on-container: #392260; --gg-accent-investigation-purple-subtle-container: #F1ECF9; --gg-accent-investigation-purple-outline: #6C4F9D; --gg-accent-map-cyan-accent: #006A6A; --gg-accent-map-cyan-on-accent: #FFFFFF; --gg-accent-map-cyan-container: #D6F0F0; --gg-accent-map-cyan-on-container: #00494A; --gg-accent-map-cyan-subtle-container: #E8F5F4; --gg-accent-map-cyan-outline: #006A6A; --gg-accent-chronicle-copper-accent: #9A4E20; --gg-accent-chronicle-copper-on-accent: #FFFFFF; --gg-accent-chronicle-copper-container: #FFE2D1; --gg-accent-chronicle-copper-on-container: #783A16; --gg-accent-chronicle-copper-subtle-container: #FBEEE5; --gg-accent-chronicle-copper-outline: #9A4E20; --gg-accent-evidence-slate-accent: #435F73; --gg-accent-evidence-slate-on-accent: #FFFFFF; --gg-accent-evidence-slate-container: #DFEAF0; --gg-accent-evidence-slate-on-container: #314C5E; --gg-accent-evidence-slate-subtle-container: #ECF2F4; --gg-accent-evidence-slate-outline: #435F73; --gg-accent-print-magenta-accent: #8B2C67; --gg-accent-print-magenta-on-accent: #FFFFFF; --gg-accent-print-magenta-container: #FAD7E9; --gg-accent-print-magenta-on-container: #5B1745; --gg-accent-print-magenta-subtle-container: #F9E9F1; --gg-accent-print-magenta-outline: #8B2C67; /* Semantic system statuses */ --gg-status-success-accent: #206B46; --gg-status-success-on-accent: #FFFFFF; --gg-status-success-container: #B6F1CF; --gg-status-success-on-container: #002E1B; --gg-status-success-subtle-container: #D8F6E4; --gg-status-success-outline: #206B46; --gg-status-warning-accent: #795900; --gg-status-warning-on-accent: #FFFFFF; --gg-status-warning-container: #FFE4A3; --gg-status-warning-on-container: #291A00; --gg-status-warning-subtle-container: #FBEFCF; --gg-status-warning-outline: #795900; --gg-status-favorite-accent: #A56600; --gg-status-favorite-on-accent: #FFFFFF; --gg-status-favorite-container: #F0E1CC; --gg-status-favorite-on-container: #4D3415; --gg-status-favorite-subtle-container: #F4EEE3; --gg-status-favorite-outline: #A56600; --gg-status-error-accent: #BA1A1A; --gg-status-error-on-accent: #FFFFFF; --gg-status-error-container: #FFDAD6; --gg-status-error-on-container: #410002; --gg-status-error-subtle-container: #FBEBE8; --gg-status-error-outline: #BA1A1A; --gg-status-info-accent: #006493; --gg-status-info-on-accent: #FFFFFF; --gg-status-info-container: #CDE8FF; --gg-status-info-on-container: #001E30; --gg-status-info-subtle-container: #E3F1FB; --gg-status-info-outline: #006493; --gg-status-pending-accent: #68539A; --gg-status-pending-on-accent: #FFFFFF; --gg-status-pending-container: #EBDDFF; --gg-status-pending-on-container: #25153C; --gg-status-pending-subtle-container: #F2ECFB; --gg-status-pending-outline: #68539A; --gg-status-offline-accent: #675C55; --gg-status-offline-on-accent: #FFFFFF; --gg-status-offline-container: #ECE0D7; --gg-status-offline-on-container: #28221E; --gg-status-offline-subtle-container: #F2EEE8; --gg-status-offline-outline: #675C55; --gg-status-neutral-accent: #55636B; --gg-status-neutral-on-accent: #FFFFFF; --gg-status-neutral-container: #E6EBEE; --gg-status-neutral-on-container: #273035; --gg-status-neutral-subtle-container: #F0F2F3; --gg-status-neutral-outline: #55636B; } [data-theme="dark"] { --gg-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23B7C1C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gg-select-chevron-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 7 5-5 5 5' fill='none' stroke='%23B7C1C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); color-scheme: dark; /* Foundation surfaces, text, and global interaction */ --gg-background: #0D1112; --gg-topbar: #0E1213; --gg-sidebar: #171C1D; --gg-panel: #131819; --gg-details: #171C1D; --gg-raised: #1C2223; --gg-field: #292F31; --gg-hover: #283032; --gg-border: #323B3E; --gg-outline: #77848A; /* Shared control and Projects-specific semantic roles */ --gg-control-border: #465156; --gg-create-tile-outline: #475157; --gg-disabled-surface: #1D2426; --gg-disabled-text: #9BA8AE; --gg-text: #E5E9EB; --gg-text-secondary: #B7C1C5; --gg-text-muted: #9BA8AE; --gg-text-placeholder: #727a7e; --gg-primary: #2FAE74; --gg-on-primary: #002916; --gg-selected: #123C2B; --gg-selected-row: #123C2B; --gg-on-selected: #C2F4D7; --gg-selected-border: #89D7AB; --gg-tree-canvas: #0B0F0E; --gg-tree-dots: #27312C; --gg-tip-background: #123C2B; --gg-tip-text: #E2E9E5; --gg-tip-border: #35443C; --gg-tip-link: #89D7AB; --gg-folder-face: #F2C94C; --gg-folder-fold: #B98A2C; --gg-living-dot: #2FAE74; --gg-deceased-dot: #B3BCC3; --gg-unknown-dot: #E6AF58; --gg-scrollbar-thumb: #647278; --gg-scrollbar-thumb-hover: #859299; --gg-tree-line: #798A80; --gg-timeline-line: #59666B; --gg-surface-bright: #30393D; --gg-surface-dim: #0D1112; --gg-inverse-surface: #E5E9EB; --gg-inverse-on-surface: #202729; --gg-scrim: #000000; --gg-on-media: #FFFFFF; /* Material 3-style role aliases (GeneoGraph customized surfaces) */ --md-sys-color-primary: #2FAE74; --md-sys-color-on-primary: #002916; --md-sys-color-primary-container: #005231; --md-sys-color-on-primary-container: #A5F3C7; --md-sys-color-secondary: #ADCEBA; --md-sys-color-on-secondary: #193A28; --md-sys-color-secondary-container: #304D3D; --md-sys-color-on-secondary-container: #C9EAD6; --md-sys-color-tertiary: #88D2E1; --md-sys-color-on-tertiary: #003741; --md-sys-color-tertiary-container: #004E59; --md-sys-color-on-tertiary-container: #A4EEFD; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-background: #0D1112; --md-sys-color-on-background: #E5E9EB; --md-sys-color-surface: #0D1112; --md-sys-color-on-surface: #E5E9EB; --md-sys-color-surface-dim: #0D1112; --md-sys-color-surface-bright: #30393D; --md-sys-color-surface-container-lowest: #0E1213; --md-sys-color-surface-container-low: #171C1D; --md-sys-color-surface-container: #1C2223; --md-sys-color-surface-container-high: #1A201F; --md-sys-color-surface-container-highest: #293236; --md-sys-color-surface-tint: #2FAE74; --md-sys-color-surface-variant: #292F31; --md-sys-color-on-surface-variant: #B7C1C5; --md-sys-color-outline: #77848A; --md-sys-color-outline-variant: #323B3E; --md-sys-color-inverse-surface: #E5E9EB; --md-sys-color-inverse-on-surface: #202729; --md-sys-color-inverse-primary: #1C6B46; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* Unified content accent families */ --gg-accent-heritage-green-accent: #42CE91; --gg-accent-heritage-green-on-accent: #003921; --gg-accent-heritage-green-container: #123C2B; --gg-accent-heritage-green-on-container: #C2F4D7; --gg-accent-heritage-green-subtle-container: #172E25; --gg-accent-heritage-green-outline: #42CE91; --gg-accent-creative-blue-accent: #59B4F2; --gg-accent-creative-blue-on-accent: #003353; --gg-accent-creative-blue-container: #1E3A4A; --gg-accent-creative-blue-on-container: #C6E6FF; --gg-accent-creative-blue-subtle-container: #1C2E34; --gg-accent-creative-blue-outline: #59B4F2; --gg-accent-rose-sepia-accent: #F58E93; --gg-accent-rose-sepia-on-accent: #5A1920; --gg-accent-rose-sepia-container: #5C2F32; --gg-accent-rose-sepia-on-container: #FFD9DB; --gg-accent-rose-sepia-subtle-container: #3A2829; --gg-accent-rose-sepia-outline: #F58E93; --gg-accent-sepia-gold-accent: #E6AF58; --gg-accent-sepia-gold-on-accent: #432C00; --gg-accent-sepia-gold-container: #5B4729; --gg-accent-sepia-gold-on-container: #F8DBB1; --gg-accent-sepia-gold-subtle-container: #3A3424; --gg-accent-sepia-gold-outline: #E6AF58; --gg-accent-investigation-purple-accent: #BC93F1; --gg-accent-investigation-purple-on-accent: #392169; --gg-accent-investigation-purple-container: #4B3A69; --gg-accent-investigation-purple-on-container: #E8D6FF; --gg-accent-investigation-purple-subtle-container: #322E43; --gg-accent-investigation-purple-outline: #BC93F1; --gg-accent-map-cyan-accent: #50CACA; --gg-accent-map-cyan-on-accent: #003737; --gg-accent-map-cyan-container: #1F4B4B; --gg-accent-map-cyan-on-container: #B7F6F4; --gg-accent-map-cyan-subtle-container: #1D3635; --gg-accent-map-cyan-outline: #50CACA; --gg-accent-chronicle-copper-accent: #EF9D6B; --gg-accent-chronicle-copper-on-accent: #42200C; --gg-accent-chronicle-copper-container: #60351F; --gg-accent-chronicle-copper-on-container: #FFD5BD; --gg-accent-chronicle-copper-subtle-container: #3C2B20; --gg-accent-chronicle-copper-outline: #EF9D6B; --gg-accent-evidence-slate-accent: #87B9D0; --gg-accent-evidence-slate-on-accent: #183141; --gg-accent-evidence-slate-container: #2A4250; --gg-accent-evidence-slate-on-container: #C4D9E5; --gg-accent-evidence-slate-subtle-container: #223137; --gg-accent-evidence-slate-outline: #87B9D0; --gg-accent-print-magenta-accent: #E28FC6; --gg-accent-print-magenta-on-accent: #27121E; --gg-accent-print-magenta-container: #572242; --gg-accent-print-magenta-on-container: #FFD5EA; --gg-accent-print-magenta-subtle-container: #382230; --gg-accent-print-magenta-outline: #E28FC6; /* Semantic system statuses */ --gg-status-success-accent: #89D7AB; --gg-status-success-on-accent: #003921; --gg-status-success-container: #005231; --gg-status-success-on-container: #A5F3C7; --gg-status-success-subtle-container: #0E3928; --gg-status-success-outline: #89D7AB; --gg-status-warning-accent: #F4CC79; --gg-status-warning-on-accent: #3D2E00; --gg-status-warning-container: #5B4200; --gg-status-warning-on-container: #FFE4A3; --gg-status-warning-subtle-container: #3A3111; --gg-status-warning-outline: #F4CC79; --gg-status-favorite-accent: #F2C94C; --gg-status-favorite-on-accent: #302100; --gg-status-favorite-container: #5B4729; --gg-status-favorite-on-container: #F8DBB1; --gg-status-favorite-subtle-container: #3A3424; --gg-status-favorite-outline: #F2C94C; --gg-status-error-accent: #FFB4AB; --gg-status-error-on-accent: #690005; --gg-status-error-container: #93000A; --gg-status-error-on-container: #FFDAD6; --gg-status-error-subtle-container: #551215; --gg-status-error-outline: #FFB4AB; --gg-status-info-accent: #91CCF3; --gg-status-info-on-accent: #00344E; --gg-status-info-container: #004D73; --gg-status-info-on-container: #CDE8FF; --gg-status-info-subtle-container: #0E3748; --gg-status-info-outline: #91CCF3; --gg-status-pending-accent: #D3B9FF; --gg-status-pending-on-accent: #35244E; --gg-status-pending-container: #4D376D; --gg-status-pending-on-container: #EBDDFF; --gg-status-pending-subtle-container: #332C45; --gg-status-pending-outline: #D3B9FF; --gg-status-offline-accent: #D1C2B7; --gg-status-offline-on-accent: #382E28; --gg-status-offline-container: #4A403A; --gg-status-offline-on-container: #ECE0D7; --gg-status-offline-subtle-container: #32302C; --gg-status-offline-outline: #D1C2B7; --gg-status-neutral-accent: #BFC9CE; --gg-status-neutral-on-accent: #243036; --gg-status-neutral-container: #353E42; --gg-status-neutral-on-container: #DFE6E9; --gg-status-neutral-subtle-container: #283236; --gg-status-neutral-outline: #BFC9CE; }