/* ============================================================================ Evergreen Design Tokens — StockRanks Dashboard Single source of truth for --eg-* CSS custom properties. Extracted out of evergreen.css so token-only consumers (e.g. auth pages) can load just the variables without pulling in evergreen.css's dashboard-shell/body rules. Load this file FIRST, before evergreen.css or auth-pages.css, in every layout's . ============================================================================ */ :root { /* ── Brand / greens ─────────────────────────────────────────────────────── Sourced directly from static/dist/img/stockranks_logo.png (PIL pixel extraction, 2026-07-12): #00690e and #00460e are the two dominant opaque greens in the mark; #43914d/#84b98b/#c2dcc5 are real anti-aliased edge-blend pixels from the same asset (used for hover/accent so the whole ramp stays true to the logo, not synthetic). --eg-table-header-alt is a same-hue darker tint (not sampled — needed as a 5th distinct band for table header rotation). ────────────────── */ --eg-sidebar: #14281c; /* deep forest — sidebar bg (dark theme restored) */ --eg-sidebar-raised: #1c3826; /* raised panels inside sidebar (user chip) */ --eg-sidebar-active: #22452f; /* active nav item bg */ --eg-brand: #00690e; /* primary brand green (logo's dominant green) */ --eg-brand-hover: #43914d; /* hover state — logo anti-alias mid-tone */ --eg-brand-active: #00460e; /* active/selected state — logo's darker green */ --eg-table-header-alt: #033309; /* table group-header rotation accent (same-hue darkest band) */ --eg-accent: #84b98b; /* soft accent — logo anti-alias tone */ --eg-accent-soft: #c2dcc5; /* softest accent — logo anti-alias tone */ --eg-gold: #ffd700; /* logo star gold — reserved, not yet wired into UI */ --eg-accent-gold: #f59e0b; /* financial amber accent — breaks the monotone-green look on key CTAs */ --eg-accent-gold-hover: #d97706; /* pressed/hover state for accent-gold surfaces */ /* ── Surfaces ─────────────────────────────────────────────────────── */ --eg-canvas: #f5f7f3; /* page background (behind the app frame) */ --eg-surface: #f5f7f3; /* app frame / muted card surface */ --eg-card: #ffffff; /* elevated card surface */ --eg-border: #e2e6de; /* hairline borders */ --eg-border-soft: #edf1ea; /* softer inner borders */ /* ── Ink / text ───────────────────────────────────────────────────── */ --eg-ink: #14281c; /* primary text on light */ --eg-ink-2: #384b3e; /* secondary text */ --eg-muted: #7c8a7f; /* muted labels / meta */ --eg-on-dark: #ffffff; /* text on sidebar */ --eg-on-dark-2: #a7bdae; /* secondary text on sidebar */ --eg-on-dark-mut:#7c9384; /* muted text on sidebar */ --eg-label: #5f7867; /* sidebar section labels */ /* ── Semantic (returns / risk) ────────────────────────────────────── */ --eg-pos: #0f7a44; /* positive / gain */ --eg-pos-bg: #e7f4ec; --eg-neg: #c0392b; /* negative / loss */ --eg-neg-bg: #fbe9e7; --eg-warn: #7a5c00; --eg-warn-bg: #fff3cd; /* ── Radii ────────────────────────────────────────────────────────── */ --eg-r-sm: 8px; --eg-r-md: 12px; --eg-r-lg: 16px; --eg-r-xl: 20px; /* ── Elevation ────────────────────────────────────────────────────── */ --eg-shadow-sm: 0 1px 2px rgba(20,40,28,.04), 0 1px 3px rgba(20,40,28,.06); --eg-shadow-md: 0 8px 24px -12px rgba(20,40,28,.28); --eg-shadow-lg: 0 30px 70px -40px rgba(20,40,28,.50); /* ── Type ─────────────────────────────────────────────────────────── */ /* Strict system-font policy: one sans stack for all UI text, one mono stack reserved for numeric data (prices, returns, datatable figures). No webfonts — the Google Fonts links (Source Sans Pro, and previously Archivo/IBM Plex Mono) were removed from the layout templates. --eg-font-ui / --eg-font-display kept as aliases so existing call sites don't need touching. */ --eg-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --eg-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --eg-font-ui: var(--eg-font-sans); --eg-font-display: var(--eg-font-sans); /* ── Spacing rhythm ───────────────────────────────────────────────── */ --eg-gap: 16px; --eg-pad: 20px; /* ── Motion ───────────────────────────────────────────────────────── */ --eg-ease: cubic-bezier(.4, 0, .2, 1); --eg-dur: .22s; }