/* sier.ing corporate design — global CSS
   Source: design-tokens.json. The theme is set through data-theme on <html> or on a container:
   <html data-theme="pastel">  Options: pastel (default) | pastelDark | highcontrast | buehneDunkel
   All three fonts (Berlin Type, Inter, Space Mono) are local under ../fonts/ —
   no Google Fonts connection needed any more. Adjust @font-face below if the path differs. */

@font-face {
  font-family: 'Berlin Type';
  src: url('../fonts/BerlinType-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Berlin Type';
  src: url('../fonts/BerlinType-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBoldItalic.otf') format('opentype');
  font-weight: 600; font-style: italic;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic;
}
/* Londrina Solid — round and raw, as if written on a flight case with
   a thick felt pen. Under the SIL Open Font License (noted in the font
   itself), so it is local like all the others: no connection to
   Google Fonts and therefore no consent needed. */
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Londrina Solid';
  src: url('../fonts/LondrinaSolid-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic;
}

/* ---- Theme-independent tokens: shape, spacing, motion, type ---- */
:root {
  --cd-radius-karte: 16px;
  --cd-radius-chip: 100px;
  --cd-radius-icon: 10px;

  --cd-shadow-objekt: 0 14px 24px -8px rgba(0,0,0,0.32);
  --cd-shadow-objekt-klein: 0 10px 18px -6px rgba(0,0,0,0.28);
  --cd-border-width: 1px;

  --cd-space-1: 4px;
  --cd-space-2: 8px;
  --cd-space-3: 12px;
  --cd-space-4: 16px;
  --cd-space-5: 24px;
  --cd-space-6: 32px;
  --cd-space-7: 48px;
  --cd-space-8: 64px;

  --cd-icon-sm: 16px;
  --cd-icon-md: 20px;
  --cd-icon-lg: 24px;
  --cd-icon-xl: 32px;
  --cd-icon-kachel: 30px;

  --cd-motion-fast: 150ms ease-out;
  --cd-motion-normal: 250ms ease-out;
  --cd-hover-rotate: -7deg;
  --cd-hover-rotate-icon: -6deg;

  /* Two fonts for two jobs, and that is deliberate.
     `display` is the brand font: logo, start page title, large
     headings. It is a showpiece, and at 13 px in a pill button it
     reads worse than what it would replace.
     `heading` therefore stays the font of the workspace — headings
     there are small, tight and come by the dozen. */
  --cd-font-display: 'Londrina Solid', 'Berlin Type', 'Arial Black', sans-serif;
  --cd-font-heading: 'Berlin Type', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cd-font-body: 'Inter', sans-serif;
  --cd-font-mono: 'Space Mono', monospace;
}

/* ---- The colour catalog ---- */
/* All the colours there are live here. Eight foreground colours with
   two values each: `pastell` as surface and `kontrast` as signal — text,
   border, icon, accent. Plus a light and a dark ground and the two
   text colours for them. Nothing else.

   Why two steps and not three: with three steps per family, two of
   them regularly stood side by side — the wordmark in one, the accent
   in the second, the instrument in the third. That read not as one
   colour but as three that just miss each other.

   The two values are set so that every combination in actual use
   holds up: `kontrast` on a light ground and as a surface under light
   text, `pastell` on a dark ground and as a surface under dark text.
   All eight exceed 4.5:1 in all four roles — verified in
   `shared/test/colorCatalog.test.ts`. */
:root {
  --cd-katalog-rot-pastell: #ffbfb8;
  --cd-katalog-rot-kontrast: #c1272d;
  --cd-katalog-orange-pastell: #fac3a5;
  --cd-katalog-orange-kontrast: #ab4b15;
  --cd-katalog-gelb-pastell: #e8ce99;
  --cd-katalog-gelb-kontrast: #7d6000;
  --cd-katalog-gruen-pastell: #b3dfb3;
  --cd-katalog-gruen-kontrast: #286d2b;
  --cd-katalog-tuerkis-pastell: #95e1e0;
  --cd-katalog-tuerkis-kontrast: #00747f;
  --cd-katalog-blau-pastell: #a4d8fe;
  --cd-katalog-blau-kontrast: #1565c0;
  --cd-katalog-violett-pastell: #d8c6fc;
  --cd-katalog-violett-kontrast: #6a1b9a;
  --cd-katalog-neutral-pastell: #d8d0c3;
  --cd-katalog-neutral-kontrast: #5b544a;

  --cd-katalog-grund-hell: #f8f3eb;
  --cd-katalog-grund-dunkel: #19150f;
  --cd-katalog-schrift-hell: #f2eee7;
  --cd-katalog-schrift-dunkel: #221c12;
}

/* ---- Themes ---- */
/* A theme picks no colours, it only hands out roles: what is surface,
   what is signal, what is ground. That is why there is not a single
   hex value here any more.

   `--cd-surface`, `--cd-border` and `--cd-text-muted` are mixtures of
   ground and text and so no colours of their own either. */

:root, [data-theme="pastel"] {
  --cd-bg: var(--cd-katalog-grund-hell);
  --cd-surface: color-mix(in srgb, var(--cd-katalog-grund-hell) 60%, #fff);
  --cd-text-primary: var(--cd-katalog-schrift-dunkel);

  --cd-rot: var(--cd-katalog-rot-pastell);
  --cd-rot-signal: var(--cd-katalog-rot-kontrast);
  --cd-orange: var(--cd-katalog-orange-pastell);
  --cd-orange-signal: var(--cd-katalog-orange-kontrast);
  --cd-gelb: var(--cd-katalog-gelb-pastell);
  --cd-gelb-signal: var(--cd-katalog-gelb-kontrast);
  --cd-gruen: var(--cd-katalog-gruen-pastell);
  --cd-gruen-signal: var(--cd-katalog-gruen-kontrast);
  --cd-tuerkis: var(--cd-katalog-tuerkis-pastell);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-kontrast);
  --cd-blau: var(--cd-katalog-blau-pastell);
  --cd-blau-signal: var(--cd-katalog-blau-kontrast);
  --cd-violett: var(--cd-katalog-violett-pastell);
  --cd-violett-signal: var(--cd-katalog-violett-kontrast);
  --cd-neutral: var(--cd-katalog-neutral-pastell);
  --cd-neutral-signal: var(--cd-katalog-neutral-kontrast);
}

/* On a dark ground the two values swap roles: the high-contrast
   colour becomes the surface, the pastel one the signal.
   The same eight colours, read the other way round. */
[data-theme="pastelDark"] {
  --cd-bg: var(--cd-katalog-grund-dunkel);
  --cd-surface: color-mix(in srgb, var(--cd-katalog-grund-dunkel) 82%, #fff);
  --cd-text-primary: var(--cd-katalog-schrift-hell);

  --cd-rot: var(--cd-katalog-rot-kontrast);
  --cd-rot-signal: var(--cd-katalog-rot-pastell);
  --cd-orange: var(--cd-katalog-orange-kontrast);
  --cd-orange-signal: var(--cd-katalog-orange-pastell);
  --cd-gelb: var(--cd-katalog-gelb-kontrast);
  --cd-gelb-signal: var(--cd-katalog-gelb-pastell);
  --cd-gruen: var(--cd-katalog-gruen-kontrast);
  --cd-gruen-signal: var(--cd-katalog-gruen-pastell);
  --cd-tuerkis: var(--cd-katalog-tuerkis-kontrast);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-pastell);
  --cd-blau: var(--cd-katalog-blau-kontrast);
  --cd-blau-signal: var(--cd-katalog-blau-pastell);
  --cd-violett: var(--cd-katalog-violett-kontrast);
  --cd-violett-signal: var(--cd-katalog-violett-pastell);
  --cd-neutral: var(--cd-katalog-neutral-kontrast);
  --cd-neutral-signal: var(--cd-katalog-neutral-pastell);
}

/* The stage, light. Same roles as "pastel", except that the ground
   becomes pure white and the text pure black: from several metres
   away and under stage lights, every bit of contrast counts. */
[data-theme="highcontrast"] {
  --cd-bg: #fff;
  --cd-surface: color-mix(in srgb, #fff 96%, #000);
  --cd-text-primary: #000;

  --cd-rot: var(--cd-katalog-rot-pastell);
  --cd-rot-signal: var(--cd-katalog-rot-kontrast);
  --cd-orange: var(--cd-katalog-orange-pastell);
  --cd-orange-signal: var(--cd-katalog-orange-kontrast);
  --cd-gelb: var(--cd-katalog-gelb-pastell);
  --cd-gelb-signal: var(--cd-katalog-gelb-kontrast);
  --cd-gruen: var(--cd-katalog-gruen-pastell);
  --cd-gruen-signal: var(--cd-katalog-gruen-kontrast);
  --cd-tuerkis: var(--cd-katalog-tuerkis-pastell);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-kontrast);
  --cd-blau: var(--cd-katalog-blau-pastell);
  --cd-blau-signal: var(--cd-katalog-blau-kontrast);
  --cd-violett: var(--cd-katalog-violett-pastell);
  --cd-violett-signal: var(--cd-katalog-violett-kontrast);
  --cd-neutral: var(--cd-katalog-neutral-pastell);
  --cd-neutral-signal: var(--cd-katalog-neutral-kontrast);
}

/* The stage, dark. Roles as in "pastelDark", but with a true black
   ground: in low ambient light any lightened surface dazzles. */
[data-theme="buehneDunkel"] {
  --cd-bg: #000;
  --cd-surface: color-mix(in srgb, #000 94%, #fff);
  --cd-text-primary: #fff;

  --cd-rot: var(--cd-katalog-rot-kontrast);
  --cd-rot-signal: var(--cd-katalog-rot-pastell);
  --cd-orange: var(--cd-katalog-orange-kontrast);
  --cd-orange-signal: var(--cd-katalog-orange-pastell);
  --cd-gelb: var(--cd-katalog-gelb-kontrast);
  --cd-gelb-signal: var(--cd-katalog-gelb-pastell);
  --cd-gruen: var(--cd-katalog-gruen-kontrast);
  --cd-gruen-signal: var(--cd-katalog-gruen-pastell);
  --cd-tuerkis: var(--cd-katalog-tuerkis-kontrast);
  --cd-tuerkis-signal: var(--cd-katalog-tuerkis-pastell);
  --cd-blau: var(--cd-katalog-blau-kontrast);
  --cd-blau-signal: var(--cd-katalog-blau-pastell);
  --cd-violett: var(--cd-katalog-violett-kontrast);
  --cd-violett-signal: var(--cd-katalog-violett-pastell);
  --cd-neutral: var(--cd-katalog-neutral-kontrast);
  --cd-neutral-signal: var(--cd-katalog-neutral-pastell);
}

/* Borders and muted text are defined in one place for all themes:
   they are no colour value of their own but always the same mixture
   of the ground and the text currently in force. */
:root, [data-theme] {
  --cd-border: color-mix(in srgb, var(--cd-text-primary) 16%, var(--cd-bg));
  --cd-text-muted: color-mix(in srgb, var(--cd-text-primary) 70%, var(--cd-bg));
}

/* ---- Base reset ---- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cd-bg);
  color: var(--cd-text-primary);
  font-family: var(--cd-font-body);
  font-size: 16px;
  line-height: 1.6;
  transition: background var(--cd-motion-normal), color var(--cd-motion-normal);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--cd-font-heading); font-weight: 700; margin: 0 0 0.4em; }
p { margin: 0 0 1em; text-wrap: pretty; }
/* Links carry the accent of their surroundings, not a fixed colour.
   Where none is set the text colour stays — a link is then recognised
   by its underline and not by a blue that appears nowhere else. */
a { color: var(--app-akzent, var(--cd-text-primary)); text-decoration: none; }
a:hover { color: var(--app-akzent, var(--cd-text-primary)); text-decoration: underline; }
code, pre, .cd-mono { font-family: var(--cd-font-mono); }

/* ---- Shapes / components ---- */

/* Content card: border, calm, part of the page */
.cd-card {
  background: var(--cd-surface);
  border: var(--cd-border-width) solid var(--cd-border);
  border-radius: var(--cd-radius-karte);
  padding: var(--cd-space-5);
}

/* Post-it: shadow, clickable/draggable, hover rotation */
.cd-postit {
  border-radius: var(--cd-radius-karte);
  box-shadow: var(--cd-shadow-objekt);
  cursor: pointer;
  transition: transform var(--cd-motion-fast);
}
.cd-postit:hover { transform: rotate(var(--cd-hover-rotate)); }

/* Icon tile: small object, optional shadow, hover rotation */
.cd-icon-tile {
  aspect-ratio: 1;
  border-radius: var(--cd-radius-icon);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--cd-motion-fast);
}
.cd-icon-tile:hover { transform: rotate(var(--cd-hover-rotate-icon)); }
.cd-icon-tile.cd-elevated { box-shadow: var(--cd-shadow-objekt-klein); }

/* Pill button / chip: fully round, the "Nothing" level (the solid colour's own contrast carries it) */
.cd-pill-button {
  display: inline-flex; align-items: center; gap: var(--cd-space-2);
  border-radius: var(--cd-radius-chip);
  padding: 9px 18px;
  font-family: var(--cd-font-heading);
  font-size: 13px; font-weight: 600;
  border: var(--cd-border-width) solid var(--cd-border);
  background: var(--cd-surface);
  color: var(--cd-text-muted);
  cursor: pointer;
  transition: background var(--cd-motion-fast), color var(--cd-motion-fast), opacity var(--cd-motion-fast);
}
.cd-pill-button:hover { opacity: 0.85; }
.cd-pill-button.cd-active {
  background: var(--cd-text-primary);
  color: var(--cd-bg);
  border-color: var(--cd-text-primary);
}

/* States */
.cd-disabled, [disabled] { opacity: 0.4; box-shadow: none; cursor: not-allowed; }
.cd-focusable:focus-visible {
  outline: 2px solid var(--app-akzent, var(--cd-text-primary));
  outline-offset: 2px;
}
.cd-error { border-color: var(--cd-rot) !important; color: var(--cd-rot-signal); }