/* ========================================================================= GRAIPH DESIGN SYSTEM TOKENS Single source of truth for the Graiph palette. Loaded by all three interfaces (Main Labeler, Classification, Drillhole Viewer). ========================================================================= */ :root { /* Backgrounds — warm charcoal */ --graiph-bg-primary: #141418; --graiph-bg-secondary: #1a1a1f; --graiph-bg-tertiary: #202025; --graiph-bg-surface: #24242a; --graiph-bg-elevated: #2c2c33; --graiph-bg-hover: #282830; --graiph-bg-light: #FFFFFF; /* Accent */ --graiph-accent: #33CC66; --graiph-accent-hover: #2bb358; --graiph-accent-muted: rgba(51, 204, 102, 0.15); /* The accent used AS TEXT (labels, values, icon glyphs). Same green here, but the light theme darkens it — #33CC66 is a 2.1:1 ink on white. The FILL keeps --graiph-accent in both themes, so the brand accent still marks active / validated state (design system). Green-as-text ALWAYS uses this token. */ --graiph-accent-text: var(--graiph-accent); /* The ink ON an accent (or success) fill. ONE value, no light-theme override — that is the point: the fill stays #33CC66 in both themes, so an ink that flipped with the background would sit near-white on green in light mode. Measured on #33CC66: white 2.11 (fails), #06210f 8.09; on the hover fill #2bb358: #06210f 6.24. Reads as 'dark green', not black, which suits the accent. (TEL-53; promoted from televiewer.css --accent-ink.) */ --graiph-accent-ink: #06210f; /* Grays */ --graiph-gray-dark: #333333; --graiph-gray-mid: #666666; --graiph-gray-light: #CCCCCC; /* Text */ --graiph-text-primary: #E8E8EC; --graiph-text-secondary: #A0A0AA; --graiph-text-muted: #6B6B78; /* Borders */ --graiph-border: #35353d; --graiph-border-hover: #45454f; --graiph-border-focus: #33CC66; /* Alerts */ --graiph-alert-warning: #F5A623; --graiph-alert-error: #E53935; --graiph-alert-info: #2196F3; --graiph-alert-success: #33CC66; /* Shadows */ --graiph-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --graiph-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35); --graiph-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.45); /* Typography */ --graiph-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --graiph-font-xs: 11px; --graiph-font-sm: 12px; --graiph-font-md: 14px; --graiph-font-lg: 16px; --graiph-font-xl: 20px; /* Spacing scale */ --graiph-space-xs: 4px; --graiph-space-sm: 8px; --graiph-space-md: 12px; --graiph-space-lg: 16px; --graiph-space-xl: 24px; /* Radii */ --graiph-radius-sm: 4px; --graiph-radius-md: 6px; --graiph-radius-lg: 8px; /* Semantic borders */ --graiph-border-subtle: 1px solid rgba(255, 255, 255, 0.08); --graiph-border-default: 1px solid rgba(255, 255, 255, 0.15); /* Overlay */ --graiph-overlay: rgba(20, 20, 24, 0.9); /* Status colors (semantic) */ --graiph-status-pending: #F5A623; --graiph-status-verified: #33CC66; --graiph-status-rejected: #E53935; --graiph-status-info: #2196F3; } /* ========================================================================= LIGHT THEME OVERRIDES Applied via html.light-theme class (set by themeManager.js). Uses html selector for FOUC prevention — class set before renders. ========================================================================= */ html.light-theme { --graiph-bg-primary: #F2F3F5; --graiph-bg-secondary: #E8E9EC; --graiph-bg-tertiary: #DCDDE1; --graiph-bg-surface: #FFFFFF; --graiph-bg-elevated: #FFFFFF; --graiph-bg-hover: #ECEDF0; --graiph-bg-light: #FFFFFF; --graiph-text-primary: #1a1a1e; --graiph-text-secondary: #5a5a65; /* Was #8a8a95 — 3.4:1 on white, 2.9:1 on --graiph-bg-hover. Hints, captions and axis labels are the smallest type in the platform and were the least legible. */ --graiph-text-muted: #64646F; --graiph-border: #D0D1D6; --graiph-border-hover: #B8B9C0; --graiph-border-subtle: 1px solid rgba(0, 0, 0, 0.06); --graiph-border-default: 1px solid rgba(0, 0, 0, 0.12); --graiph-accent-muted: rgba(51, 204, 102, 0.12); /* Inks, darkened to clear WCAG AA (4.5:1) as small label text. Measured against the three light surfaces #FFFFFF / #F2F3F5 / #ECEDF0; the saturated originals fail badly — #33CC66 2.1/1.9/1.8, #F5A623 2.0/1.8/1.7, #2196F3 3.1/2.8/2.7, #E53935 4.2/3.8/3.6. accent-text #17793A -> 5.48 / 4.94 / 4.68 warning #A05F00 -> 5.08 / 4.58 / 4.34 info #1565C0 -> 5.75 / 5.18 / 4.91 error #C62828 -> 5.62 / 5.06 / 4.80 The alert tokens darken outright because they are inks first. The few places that use one as a FILL put white (or the page background) on it, which only improves: white on #F5A623 was 2.0:1 and is 5.1:1 on #A05F00. Anything painting DARK ink on an alert fill has to flip its ink with the theme — see #addDepthMarkBtn in the drillhole viewer. --graiph-accent and --graiph-status-* are NOT darkened: those are fills that carry dark ink, and the accent is the brand green. */ --graiph-accent-text: #17793A; /* Focus ring. The :root value stays #33CC66 (7.3:1 on the dark surfaces), but on the light surfaces that green measures 2.11 on white / 1.90 on the page / 1.38 against the resting border #D0D1D6 — an invisible ring exactly where SC 1.4.11 measures it (adjacent colours). Reuse the darkened accent ink: 5.48 / 4.94 / 3.59. */ --graiph-border-focus: var(--graiph-accent-text); --graiph-alert-warning: #A05F00; --graiph-alert-error: #C62828; --graiph-alert-info: #1565C0; --graiph-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --graiph-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12); --graiph-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); --graiph-overlay: rgba(0, 0, 0, 0.5); /* Grays — inverted for light backgrounds */ --graiph-gray-dark: #CCCCCC; --graiph-gray-mid: #999999; --graiph-gray-light: #555555; }