/* ScaleQor design tokens — place in wwwroot/css/, link before app.css. Load fonts in App.razor : */ :root{ /* Core brand */ --violet-900:#2C2A63; /* pressed */ --violet-700:#403D88; /* Midnight Violet — brand, headings */ --violet-600:#5A56A7; /* Soft Violet — ALL interaction */ --violet-500:#7D7ABD; --violet-200:#C9C8E4; --violet-100:#E4E3F2; /* thin borders */ --violet-50:#F1F1F8; --gold-500:#D4AF37; /* Champagne Gold — RARE: key metrics, recommendations */ --gold-600:#B3922B; --gold-100:#F6EFD7; --canvas:#F8F9FC; /* light page background */ --charcoal-900:#121124; /* dark portal background */ --charcoal-800:#1B1A33; /* dark card */ --charcoal-700:#26244A; /* dark border */ --ink-900:#25243A; --ink-600:#5D5C72; --ink-400:#8B8A9C; --white:#FFFFFF; /* Semantic */ --success:#16A34A;--warning:#F59E0B;--error:#DC2626;--info:#2563EB; --success-bg:#E9F6EE;--warning-bg:#FDF3E1;--error-bg:#FBEAEA;--info-bg:#E9F0FD; /* Aliases — light */ --surface-page:var(--canvas);--surface-card:var(--white); --text-heading:var(--violet-700);--text-body:var(--ink-900);--text-muted:var(--ink-600); --interactive:var(--violet-600);--interactive-hover:var(--violet-700);--interactive-active:var(--violet-900); --border-thin:var(--violet-100);--border-strong:var(--violet-200);--focus-ring:var(--violet-600); /* Aliases — dark portal */ --dark-surface-page:var(--charcoal-900);--dark-surface-card:var(--charcoal-800); --dark-border:var(--charcoal-700);--dark-text-body:#D9D8E6;--dark-text-muted:#9A99B5; /* Claim badge colors (dark surfaces) */ --claim-fact:#52C793;--claim-infer:#8DA0EC;--claim-rec:#E8C563;--claim-ask:#E3B94F;--claim-miss:#E58A7D; /* Type */ --font-display:'Poppins',system-ui,sans-serif; --font-body:'Lato',system-ui,sans-serif; --text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:17px;--text-lg:20px; --text-xl:24px;--text-2xl:30px;--text-3xl:38px;--text-4xl:48px;--text-5xl:60px; --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700; --leading-tight:1.15;--leading-heading:1.25;--leading-body:1.6; --tracking-heading:-0.01em;--tracking-label:0.04em; /* Space (4px scale) */ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px; --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px; /* Radii */ --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px; /* Effects */ --shadow-sm:0 1px 2px rgba(37,36,58,.06); --shadow-md:0 4px 12px rgba(37,36,58,.08); --shadow-lg:0 12px 32px rgba(37,36,58,.12); --shadow-focus:0 0 0 3px rgba(90,86,167,.28); --ease-calm:cubic-bezier(.25,.6,.3,1); --duration-fast:150ms;--duration-base:250ms;--duration-slow:400ms; } body{margin:0;background:var(--canvas);color:var(--ink-900);font-family:var(--font-body);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading)} a{color:var(--violet-600)}a:hover{color:var(--violet-700)} :focus-visible{outline:none;box-shadow:var(--shadow-focus)}