/* Praxis Krüger — design tokens · preset “Krüger 02” */ /* Rules: no all-caps · no letterspacing · nothing below the base · tracking −4%…0 */ :root{ /* ── 1 · primitives — ramp shape ────────────────── */ /* neutral: hue 243, tint 25, contrast 0.6, ends 0.95…0.02 */ /* ── 1 · primitives — generated ramps, OKLCH ────── */ --color-neutral-50: oklch(0.9500 0.0047 243.0); --color-neutral-100: oklch(0.9048 0.0051 243.0); --color-neutral-200: oklch(0.8370 0.0058 243.0); --color-neutral-300: oklch(0.7559 0.0065 243.0); --color-neutral-400: oklch(0.5925 0.0074 243.0); --color-neutral-500: oklch(0.4949 0.0075 243.0); --color-neutral-600: oklch(0.4702 0.0075 243.0); --color-neutral-700: oklch(0.4306 0.0074 243.0); --color-neutral-800: oklch(0.3535 0.0071 243.0); --color-neutral-900: oklch(0.2205 0.0063 243.0); --color-neutral-950: oklch(0.0200 0.0043 243.0); --color-wash-50: oklch(0.9500 0.0047 243.0 / 0.100); --color-wash-100: oklch(0.9048 0.0051 243.0 / 0.100); --color-wash-200: oklch(0.8370 0.0058 243.0 / 0.100); --color-wash-300: oklch(0.7559 0.0065 243.0 / 0.100); --color-wash-400: oklch(0.5925 0.0074 243.0 / 0.100); --color-wash-500: oklch(0.4949 0.0075 243.0 / 0.100); --color-wash-600: oklch(0.4702 0.0075 243.0 / 0.100); --color-wash-700: oklch(0.4306 0.0074 243.0 / 0.100); --color-wash-800: oklch(0.3535 0.0071 243.0 / 0.100); --color-wash-900: oklch(0.2205 0.0063 243.0 / 0.100); --color-wash-950: oklch(0.0200 0.0043 243.0 / 0.100); --color-brand-50: oklch(0.9820 0.0008 237.0); --color-brand-100: oklch(0.9442 0.0014 237.0); --color-brand-200: oklch(0.8787 0.0027 237.0); --color-brand-300: oklch(0.7881 0.0046 237.0); --color-brand-400: oklch(0.6521 0.0079 237.0); --color-brand-500: oklch(0.5413 0.0107 237.0); --color-brand-600: oklch(0.4405 0.0109 237.0); --color-brand-700: oklch(0.3524 0.0101 237.0); --color-brand-800: oklch(0.2516 0.0083 237.0); --color-brand-900: oklch(0.1660 0.0064 237.0); --color-brand-950: oklch(0.1560 0.0049 237.0); --color-red-50: oklch(0.9820 0.0089 17.9); --color-red-100: oklch(0.9522 0.0240 17.9); --color-red-200: oklch(0.9004 0.0521 17.9); --color-red-300: oklch(0.8288 0.0957 17.9); --color-red-400: oklch(0.7214 0.1746 17.9); --color-red-500: oklch(0.6339 0.2539 17.9); --color-red-600: oklch(0.5535 0.2218 17.9); --color-red-700: oklch(0.4831 0.1936 17.9); --color-red-800: oklch(0.4027 0.1614 17.9); --color-red-900: oklch(0.3344 0.1341 17.9); --color-red-950: oklch(0.2620 0.1051 17.9); --color-ochre-50: oklch(0.9820 0.0110 62.1); --color-ochre-100: oklch(0.8774 0.0211 62.1); --color-ochre-200: oklch(0.6962 0.0401 62.1); --color-ochre-300: oklch(0.4453 0.0682 62.1); --color-ochre-400: oklch(0.4103 0.0944 62.1); --color-ochre-500: oklch(0.3818 0.0879 62.1); --color-ochre-600: oklch(0.3559 0.0819 62.1); --color-ochre-700: oklch(0.3332 0.0767 62.1); --color-ochre-800: oklch(0.3073 0.0708 62.1); --color-ochre-900: oklch(0.2853 0.0658 62.1); --color-ochre-950: oklch(0.2620 0.0604 62.1); --color-paper: var(--color-neutral-50); --color-ink: var(--color-neutral-950); /* ── 2 · semantic roles — {property}-{role}-{step} ─ */ --fg-base-subtle: var(--color-neutral-400); --fg-base-muted: var(--color-neutral-500); --fg-base-default: var(--color-neutral-950); --fg-base-emphasized: var(--color-ink); --fg-base-strong: var(--color-ink); --fg-base-negative: var(--color-paper); --bg-base-subtle: var(--color-neutral-50); --bg-base-muted: var(--color-wash-700); --bg-base-default: var(--color-neutral-100); --bg-base-emphasized: var(--color-neutral-200); --bg-base-strong: var(--color-neutral-300); --bg-base-negative: var(--color-ink); --border-base-subtle: var(--color-neutral-100); --border-base-muted: var(--color-neutral-200); --border-base-default: var(--color-neutral-300); --border-base-emphasized: var(--color-neutral-700); --border-base-strong: var(--color-ink); --border-base-negative: var(--color-paper); --bg-card-default: var(--color-neutral-50); --fg-card-default: var(--color-neutral-800); --border-card-default: var(--color-neutral-200); --bg-overlay-default: var(--color-neutral-100); --fg-overlay-default: var(--color-neutral-800); --border-overlay-default: var(--color-neutral-300); --fg-brand-muted: var(--color-brand-600); --fg-brand-default: var(--color-brand-900); --fg-brand-emphasized: var(--color-brand-900); --bg-brand-subtle: var(--color-brand-100); --bg-brand-muted: var(--color-wash-900); --bg-brand-default: var(--color-brand-900); --bg-brand-emphasized: var(--color-brand-950); --border-brand-strong: var(--color-brand-900); --fg-on-brand-default: var(--color-paper); --fg-destructive-default: var(--color-red-600); --fg-destructive-emphasized: var(--color-red-700); --bg-destructive-subtle: var(--color-red-50); --bg-destructive-default: var(--color-red-500); --bg-destructive-emphasized: var(--color-red-600); --border-destructive-default: var(--color-red-500); --bg-selection-default: var(--color-ochre-300); --fg-selection-default: var(--color-neutral-200); --bg-wash-subtle: var(--color-wash-700); --bg-wash-strong: var(--color-wash-900); --bg-wash-negative-subtle: var(--color-wash-200); --bg-wash-negative-strong: var(--color-wash-50); --fg-on-destructive-default: var(--color-paper); /* ── 3 · component — states the grammar has no word for ─ */ --border-width-hairline: 1px; /* table rules, list and menu dividers */ --border-width-default: 1px; /* card and overlay edges, input frames */ --border-width-strong: 2px; /* focus rings, group rules, quote and callout bars */ --card-border: var(--border-width-default) solid var(--border-card-default); /* every card has one — invisible only by choice */ --overlay-border: var(--border-width-default) solid var(--border-overlay-default); /* separates a floating surface from the page */ --button-puck: 44px; /* diameter of the round icon puck */ --button-border-width: 1px; /* weight of the button edge */ --radius-puck: 0%; /* puck corners — 50% is a circle */ --underline-weight: 1px; /* stroke of the link underline */ --button-pad-y: 0.6em; /* button padding, top */ --button-pad-x: 0.9em; /* button padding, sides */ --button-pad-puck: 0.25em; /* button padding when a puck sets the height */ --badge-pad-y: 0.5em; /* badge padding, top */ --badge-pad-x: 1em; /* badge padding, sides */ --input-pad-y: 0.45em; /* input padding, top */ --input-pad-x: 0.6em; /* input padding, sides */ --stamp-pad-y: 0.22em; /* stamp padding, top */ --stamp-pad-x: 0.42em; /* stamp padding, sides */ --pad-optical: 0.1em; /* extra at the bottom — cap height sits higher than the baseline sits low */ --menu-optical: 0.31em; /* the same correction at display grade */ --list-indent: 1.1em; /* space the bullet lives in */ --list-indent-ordered: 1.8em; /* the same for two digits */ --quote-indent: 1.2em; /* gap between the quote bar and its text */ --underline-offset: 0.14em; /* gap between baseline and underline */ --underline-speed: 675ms; /* how long the underline takes to draw itself */ --radius-button: 0px; /* button corners */ --radius-badge: 40px; /* badge corners — the one round thing */ --radius-input: 32px; /* input corners */ --radius-card: 0px; /* card corners */ --radius-overlay: 0px; /* overlay corners */ --focus-ring: var(--border-base-strong); /* keyboard focus outline */ --bg-card-hover: var(--bg-base-muted); /* a card that is itself a link */ --bg-base-hover: var(--bg-wash-subtle); /* surface while hovered */ --bg-base-active: var(--bg-base-emphasized); /* surface while active */ --bg-brand-hover: var(--bg-brand-emphasized); /* action while hovered */ --bg-brand-active: var(--bg-brand-emphasized); /* action while active */ /* ── Die Grade — jeder durch seine Aufgabe definiert ──────── */ --fs-mark: calc(var(--fs-lead) * (var(--cap-height, .712) + var(--lh-title-lead, var(--lh-body))) / var(--cap-height, .712)); /* Wortmarke: Versalhöhe überspannt die zwei Zeilen daneben */ --fs-nav: var(--nav-fit, var(--fs-lead)); /* Menüzeilen: so groß, wie der längste Punkt einzeilig bleibt */ --fs-lead: max(clamp(var(--fs-read), calc((100vw - var(--gutter) * 2) / (43 * var(--ch-width, .5))), calc(var(--fs-read) * 1.48)), calc(100vw * 0.0222)); /* Aufmacher: ein Schritt über dem Lesetext — und fällt mit ihm zusammen, sobald der Platz fehlt — h1, h2 */ --fs-read: clamp(20px, calc((100vw - var(--gutter) * 2) / (64 * var(--ch-width, .5))), 24px); /* Lesetext: größter Grad, bei dem das Zeilenmaß hält — zwischen zwei Schranken — h3, p, li, td */ --fs-caption: 16px; /* Hilfszeile: fester Grad, der kleinste im System — .text-small */ /* ── rhythm ─────────────────────────────────────── */ --lh-body: 1.3; --lh-display: 1.05; --tracking-display: -0.0400em; /* am größten Grad */ --tracking-body: 0.0000em; /* ab Lesegröße abwärts */ --zeilenmass: 64; /* Zeichen, die eine Zeile tragen soll */ /* ── space — base 12px, ratio 1.40 ── */ --space-0: 12px; --space-1: 16.8px; --space-2: 23.5px; --space-3: 32.9px; --space-4: 46.1px; --space-5: 64.5px; --space-6: 90.4px; --space-tight: var(--space-1); /* inside one block */ --space-block: var(--space-3); /* between blocks */ --space-section: var(--space-5); /* between sections */ --space-group: var(--space-6); /* between groups */ /* ── layout — full bleed, no container cap ──────── */ --gutter: 16px; --columns: 6; --col-min: 340px; /* smallest column a self-breaking grid accepts */ --col-min-narrow: calc(var(--col-min) * .68); } /* one weight only — never let the browser fake a second */ h1,h2,h3,h4,h5,h6,b,strong,th{ font-weight:400 } body,body *{ font-synthesis:none } /* Umgedrehter Kontext für einen Bereich der Seite: