/* Wachenberg Ventures design tokens (aus dem Claude Design Export) */
:root{
/* ---- Papier (light, warm neutrals) ---- */
--paper-0:#FFFFFF; /* page background */
--paper-1:#FAF8F6; /* surface 1 — sections, wells */
--paper-2:#F3F0EB; /* surface 2 — tinted cards, table header wells */
--paper-3:#EAE6DF; /* pressed fills, hover wells */
/* ---- Ink (warm near-black text) ---- */
--ink-900:#221D26; /* text 1 — 15,8:1 on white */
--ink-600:#5C5560; /* text 2 — 7,2:1 */
--ink-400:#7B7280; /* text 3 — 4,9:1 */
/* ---- Bordeaux (primary — Qatar-maroon) ---- */
--bordeaux-100:#F9EEF1;
--bordeaux-200:#EFD2DA;
--bordeaux-300:#DCA3B2;
--bordeaux-400:#C06A82;
--bordeaux-500:#A43458; /* hover, focus ring */
--bordeaux-600:#8A1538; /* primary CTA, links, marks — 9,6:1 on white */
--bordeaux-700:#701130; /* pressed, link text */
--bordeaux-800:#530D25; /* deep surfaces (slides, footer) */
--bordeaux-900:#38091A;
/* ---- Purpur (secondary — support, dataviz) ---- */
--plum-100:#F4EEF6;
--plum-200:#E2D2E7;
--plum-300:#C3A3CD;
--plum-400:#9F70AF;
--plum-500:#7F4E91; /* lines, icons secondary */
--plum-600:#663A76; /* secondary text accent — 7,4:1 */
--plum-700:#4E2B5B;
--plum-800:#371F41;
/* ---- Text aliases ---- */
--text-1:var(--ink-900);
--text-2:var(--ink-600);
--text-3:var(--ink-400);
--text-on-accent:#FDF9F5; /* warm off-white on bordeaux */
/* ---- Lines (hairlines replace shadows) ---- */
--line:#E6E1DA;
--line-strong:#CFC8BF;
--line-accent:var(--bordeaux-600);
/* ---- Semantic (muted, light-theme tuned) ---- */
--ok-text:#2F6B44;--ok-line:#9CC4AA;--ok-bg:#EFF6F1;
--warn-text:#8A5E10;--warn-line:#DDBE85;--warn-bg:#FBF4E6;
--err-text:#A21F2F;--err-line:#E0A3A3;--err-bg:#FBEEEE;
/* ---- Semantic aliases ---- */
--bg:var(--paper-0);
--surface-1:var(--paper-1);
--surface-card:var(--paper-0);
--surface-raised:var(--paper-0);
--text-body:var(--text-1);
--text-muted:var(--text-2);
--accent:var(--bordeaux-600);
--accent-text:var(--bordeaux-700);
--focus-ring:var(--bordeaux-500);
/* ---- Dataviz series order (bordeaux first, purpur second) ---- */
--chart-1:#8A1538;--chart-2:#7F4E91;--chart-3:#C06A82;--chart-4:#9F70AF;--chart-5:#6E6675;--chart-6:#4E2B5B;
--chart-grid:#ECE8E2;
}
:root{
/* strict 8px grid; 4px half-step for icon-to-label gaps only */
--sp-05:4px;--sp-1:8px;--sp-15:12px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;--sp-8:64px;--sp-10:80px;--sp-12:96px;--sp-16:128px;
--container:1200px;
--gutter:32px;
}
:root{
/* angular geometry — radii 0/2/4 only, hairlines instead of shadows */
--radius-0:0;--radius-1:2px;--radius-2:4px;
--border-hair:1px solid var(--line);
--border-strong:1px solid var(--line-strong);
--border-accent:1px solid var(--line-accent);
/* one permitted soft shadow — overlays only (modals, popovers) */
--shadow-raised:0 8px 28px rgba(34,29,38,0.10); /* @kind other */
/* motion — fast, restrained */
--motion-fast:150ms; /* @kind other */
--motion-base:200ms; /* @kind other */
--ease:cubic-bezier(0.3,0,0.2,1); /* @kind other */
/* the only permitted gradients: subtle warm surface shifts */
--grad-surface:linear-gradient(180deg,#FFFFFF 0%,#FAF8F6 100%);
--grad-hero:linear-gradient(160deg,#FFFFFF 0%,#FAF7F5 55%,#F7EDF0 100%); /* @kind color */
/* image treatment: slightly desaturated, warm; bordeaux protection gradient */
--img-overlay:linear-gradient(180deg,rgba(56,9,26,0.10),rgba(56,9,26,0.62)); /* @kind color */
--img-filter:grayscale(0.25) contrast(1.03); /* @kind other */
}
:root{
--font-display:'Source Serif 4','Noto Serif SC',Georgia,serif;
--font-body:'Source Sans 3','Noto Sans SC',ui-sans-serif,system-ui,sans-serif;
--font-serif:'Newsreader','Noto Serif SC',Georgia,serif;
/* Scale — display serif, tight leading, restrained tracking */
--type-display-xl:600 64px/1.08 var(--font-display); --track-display-xl:-0.015em;
--type-display:600 48px/1.1 var(--font-display);     --track-display:-0.01em;
--type-h1:600 36px/1.18 var(--font-display);         --track-h1:-0.008em;
--type-h2:600 28px/1.22 var(--font-display);         --track-h2:-0.005em;
--type-h3:600 22px/1.3 var(--font-display);          --track-h3:0em; /* @kind other */
--type-h4:600 18px/1.35 var(--font-display);         --track-h4:0em; /* @kind other */
/* Body — neutral, highly readable */
--type-body-lg:400 18px/1.6 var(--font-body);
--type-body:400 16px/1.6 var(--font-body);
--type-body-sm:400 14px/1.55 var(--font-body);
--type-caption:400 13px/1.45 var(--font-body);
--type-overline:600 12px/1.3 var(--font-body); --track-overline:0.1em; /* uppercase */
/* Serif italic — quotes & KPI storytelling */
--type-quote:italic 400 28px/1.4 var(--font-serif);
--type-kpi:500 52px/1.05 var(--font-serif);
--type-kpi-sm:500 36px/1.1 var(--font-serif);
}