/* Design tokens for chalupny.ch: every colour, font, radius, shadow and spacing step the site uses.
   The same names and values as the design system: https://claude.ai/artifact/Sz3NLiKfuxM8jgDrHzysNr
   Every page links this file before style.css; style.css and portfolio.css use these names instead of literal values. */

:root {
    /* Colour: paper and ink. The pages are monochrome; small text on paper uses ink, ink-body, ink-tagline or ink-description. */
    --paper: #fafaf8;
    --paper-print: #f4f2ec;
    --paper-white: #ffffff;
    --ink: #1a1a1a;
    --ink-body: #2a2a2a;
    --ink-deep: #111111;
    --ink-tagline: #444444;
    --ink-print-desc: #555555;
    --ink-description: #666666;
    --ink-aside: #777777;
    --ink-meta: #888888;
    --ink-quiet: #aaaaaa;
    --ink-hint: #bbbbbb;
    --rule: #dddddd;
    --hairline: rgba(26, 26, 26, 0.12);
    --hairline-strong: rgba(26, 26, 26, 0.35);

    /* Colour: figures. The only colour on the site, for figures and their speech bubbles (people.js draws them with the same hues). */
    --figure-stroke: #6b6b6b;
    --figure-grey: hsl(0, 0%, 28%);
    --figure-red: hsl(5, 82%, 58%);
    --figure-orange: hsl(25, 82%, 58%);
    --figure-gold: hsl(42, 82%, 58%);
    --figure-teal: hsl(160, 82%, 58%);
    --figure-cyan: hsl(195, 82%, 58%);
    --figure-blue: hsl(225, 82%, 58%);
    --figure-violet: hsl(270, 82%, 58%);
    --figure-magenta: hsl(310, 82%, 58%);
    --figure-crimson: hsl(340, 82%, 58%);

    /* Typefaces (Google Fonts) */
    --font-display: 'Syne', sans-serif;
    --font-serif: 'Instrument Serif', serif;

    /* Spacing */
    --space-3xs: 0.25rem;
    --space-2xs: 0.4rem;
    --space-xs: 0.6rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2.5rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Radius */
    --radius-none: 0;
    --radius-badge: 3px;
    --radius-bubble: 8px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* Shadows: paper objects only (prints, screenshots) */
    --shadow-print: 0 18px 40px rgba(0, 0, 0, 0.55);
    --shadow-print-lifted: 0 30px 70px rgba(0, 0, 0, 0.7);
    --shadow-shot: 0 24px 60px rgba(0, 0, 0, 0.35);

    /* Layout */
    --measure-reading: 680px;
    --measure-list: 720px;
    --width-table: 1100px;
    --print-min: 280px;
    --cursor-dot: 8px;

    /* Line widths */
    --stroke-hair: 1px;
    --stroke-filter: 1.5px;
    --stroke-focus: 2px;
    --stroke-figure: 2.2px;

    /* Opacity: hover and inactive states use opacity, not colour */
    --opacity-separator: 0.2;
    --opacity-quiet: 0.35;
    --opacity-nav: 0.4;
    --opacity-back: 0.5;
    --opacity-hover-card: 0.65;
    --opacity-hover-filter: 0.7;
}