/* * Design tokens — the single source of truth for color, spacing, radius, * shadow and typography. Declared on :root so every other stylesheet can * consume them via var(). Loaded first in the (see Html.kt). * * The palette keeps StockRanker's friendly, light identity but replaces the * scattered named/hex colours with a cohesive, slightly modernised scale. */ :root { /* Brand / interactive */ --color-brand: #1a44d6; /* was mediumblue — a touch softer */ --color-link: var(--color-brand); /* Surfaces (light → accent) */ --color-surface: #ffffff; --color-surface-raised: #fbfcfe; /* was Snow — cards, dropdowns */ --color-surface-sunken: #f4f6f9; /* was WhiteSmoke — info zones */ --color-surface-accent: #eef4fc; /* was AliceBlue — nav, buttons */ --color-surface-header: #fbf3d8; /* was cornsilk — table headers */ /* Text */ --color-text: #1c1e21; --color-text-muted: #6b7280; /* was gray / DimGray */ --color-text-subtle: #9aa0a6; /* was DarkGray */ /* Borders */ --color-border: #d7dbe0; /* was LightGray / darkgray */ --color-border-strong: #9aa0a6; /* was gray */ /* Rating scale (company × category tints) */ --rating-strong: #b6d7a8; --rating-neutral: #f1f3f5; --rating-weak: #ffe599; --rating-failed: #e08a78; /* was #dd7e6b — slightly warmer */ /* Semantic zones */ --color-info-bg: #f4f6f9; --color-ok-bg: #e8f4e8; --color-danger-bg: #fff5f5; --color-danger: #b3261e; /* was FireBrick */ --color-danger-hover: #d65a4a; /* was Coral */ --color-warning-bg: #f8e8e8; --color-warning-hover: #fdeef2; /* was LavenderBlush */ --color-success: #4caf50; /* toggle "on" */ /* Tooltip */ --color-tooltip-bg: #2b2f36; --color-tooltip-text: #ffffff; /* Overlays & veils */ --color-overlay: rgba(0, 0, 0, 0.4); --color-hover-veil: rgba(0, 0, 0, 0.05); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.8rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* Radius (reconciles the old 0.2em/0.4em/0.8em/1em/16px mix) */ --radius-sm: 0.4em; --radius-md: 0.8em; --radius-lg: 16px; --radius-pill: 999px; /* Elevation */ --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.18); --focus-ring: 0 0 0 3px rgba(26, 68, 214, 0.25); /* Typography */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-sm: 0.85rem; --text-lg: 1.2rem; }