/* Nur hier stehen Rohfarben. Abweichungen von KERN liegen bewusst im
   `--bmds-`-Namensraum, damit klar bleibt, was Standard ist und was
   Hauszutat: Light (300), das KERN nicht kennt, Farbbaender, fuer die
   KERN keine Rolle hat, und Schriftgrade zwischen KERNs Stufen. Der
   Fokusring bleibt bewusst KERNs neutraler Ton, in Markenfarbe war er
   auf Blau unsichtbar. */

:root {
    --bmds-color-ink: #1b1b1b;
    --bmds-color-ink-soft: #3a3a3a;
    --bmds-color-ink-muted: #5a5a5a;
    --bmds-color-white: #ffffff;

    --bmds-color-green: #4dffb0;
    --bmds-color-green-light: #7bffc6;
    --bmds-color-blue: #36349d;
    --bmds-color-blue-deep: #1c1b57;
    --bmds-color-blue-night: color-mix(in oklab, var(--bmds-color-blue-deep) 60%, black);
    --bmds-color-lavender: #e3e6f2;
    --bmds-color-mint: #effff8;
    --bmds-color-yellow: #f6cd45;
    --bmds-color-yellow-light: #ffd964;

    --bmds-color-magenta: #db0045;
    --bmds-color-lavender-pale: #f6f6f9;
    --bmds-color-slate: #8a8a9b;
    --bmds-color-maroon: #3d0d0a;
    --bmds-color-red: #e13425;
    --bmds-color-amber: #f5bc42;

    --bmds-color-line: rgb(27 27 27 / 0.12);
    --bmds-color-line-card: rgb(27 27 27 / 0.14);
    --bmds-color-mint-pale: #f7fffb;
    --bmds-color-hatch: #eeeeee;
    --bmds-color-line-oncolor: rgb(255 255 255 / 0.2);
    --bmds-color-muted-oncolor: rgb(255 255 255 / 0.7);

    --bmds-avatar-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'><circle cx='28' cy='22' r='10'/><path d='M8 56c0-12 9-19 20-19s20 7 20 19z'/></svg>");

    --bmds-brand-ratio: 80 / 114;
    --bmds-brand-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 114'><path d='M12.3516 0C21.418 1.21366e-05 30.0048 1.01341 38.1113 3.04004C46.3244 5.06668 53.4709 8.37342 59.5508 12.96C65.6306 17.4399 70.4303 23.3064 73.9502 30.5596C77.5768 37.8127 79.3906 46.6126 79.3906 56.959C79.3906 66.1322 77.6303 74.2394 74.1104 81.2793C70.6971 88.2124 66.0569 94.0791 60.1904 98.8789C54.3239 103.572 47.5508 107.145 39.8711 109.599C32.1912 112.052 24.1375 113.278 15.7109 113.278H0V90.2383H12.8311C18.591 90.2383 23.9245 89.6518 28.8311 88.4785C33.8443 87.3052 38.1644 85.3854 41.791 82.7188C45.4176 79.9455 48.2439 76.3722 50.2705 71.999C52.4038 67.5192 53.4707 62.0794 53.4707 55.6797C53.4707 50.1331 52.4038 45.3326 50.2705 41.2793C48.2439 37.1196 45.4709 33.7066 41.9512 31.04C38.4312 28.3734 34.2706 26.4001 29.4707 25.1201C24.7777 23.7336 19.8181 23.0401 14.5918 23.04H0V0H12.3516Z' fill='black'/></svg>");

    --bmds-brand-mask-bowl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 114'><path d='M0 90.2383H12.8311C18.591 90.2383 23.9245 89.6518 28.8311 88.4785C33.8443 87.3052 38.1644 85.3854 41.791 82.7188C45.4176 79.9455 48.2439 76.3722 50.2705 71.999C52.4038 67.5192 53.4707 62.0794 53.4707 55.6797C53.4707 50.1331 52.4038 45.3326 50.2705 41.2793C48.2439 37.1196 45.4709 33.7066 41.9512 31.04C38.4312 28.3734 34.2706 26.4001 29.4707 25.1201C24.7777 23.7336 19.8181 23.0401 14.5918 23.04H0Z' fill='black'/></svg>");

    --bmds-gradient-brand: linear-gradient(var(--bmds-color-yellow) 0%, var(--bmds-color-green) 46%, var(--bmds-color-blue) 100%);

    /* Zweifarbig fuer die kompakte Buehne, je nach Flaeche gegenlaeufig. */
    --bmds-gradient-brand-short: linear-gradient(var(--bmds-color-green) 0%, var(--bmds-color-blue) 100%);
    --bmds-gradient-brand-short-reverse: linear-gradient(var(--bmds-color-blue) 0%, var(--bmds-color-green) 100%);

    --bmds-gradient-warm: linear-gradient(var(--bmds-color-maroon) 0%, var(--bmds-color-red) 52%, var(--bmds-color-amber) 100%);

    --bmds-brand-pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260'><g fill='black'><path transform='translate(6 8) scale(0.875)' d='M12.3516 0C21.418 1.21366e-05 30.0048 1.01341 38.1113 3.04004C46.3244 5.06668 53.4709 8.37342 59.5508 12.96C65.6306 17.4399 70.4303 23.3064 73.9502 30.5596C77.5768 37.8127 79.3906 46.6126 79.3906 56.959C79.3906 66.1322 77.6303 74.2394 74.1104 81.2793C70.6971 88.2124 66.0569 94.0791 60.1904 98.8789C54.3239 103.572 47.5508 107.145 39.8711 109.599C32.1912 112.052 24.1375 113.278 15.7109 113.278H0V90.2383H12.8311C18.591 90.2383 23.9245 89.6518 28.8311 88.4785C33.8443 87.3052 38.1644 85.3854 41.791 82.7188C45.4176 79.9455 48.2439 76.3722 50.2705 71.999C52.4038 67.5192 53.4707 62.0794 53.4707 55.6797C53.4707 50.1331 52.4038 45.3326 50.2705 41.2793C48.2439 37.1196 45.4709 33.7066 41.9512 31.04C38.4312 28.3734 34.2706 26.4001 29.4707 25.1201C24.7777 23.7336 19.8181 23.0401 14.5918 23.04H0V0H12.3516Z'/><path transform='translate(136 138) scale(0.875)' d='M12.3516 0C21.418 1.21366e-05 30.0048 1.01341 38.1113 3.04004C46.3244 5.06668 53.4709 8.37342 59.5508 12.96C65.6306 17.4399 70.4303 23.3064 73.9502 30.5596C77.5768 37.8127 79.3906 46.6126 79.3906 56.959C79.3906 66.1322 77.6303 74.2394 74.1104 81.2793C70.6971 88.2124 66.0569 94.0791 60.1904 98.8789C54.3239 103.572 47.5508 107.145 39.8711 109.599C32.1912 112.052 24.1375 113.278 15.7109 113.278H0V90.2383H12.8311C18.591 90.2383 23.9245 89.6518 28.8311 88.4785C33.8443 87.3052 38.1644 85.3854 41.791 82.7188C45.4176 79.9455 48.2439 76.3722 50.2705 71.999C52.4038 67.5192 53.4707 62.0794 53.4707 55.6797C53.4707 50.1331 52.4038 45.3326 50.2705 41.2793C48.2439 37.1196 45.4709 33.7066 41.9512 31.04C38.4312 28.3734 34.2706 26.4001 29.4707 25.1201C24.7777 23.7336 19.8181 23.0401 14.5918 23.04H0V0H12.3516Z'/></g></svg>");
    --bmds-brand-pattern-size: 16.25rem;

    --bmds-surface-brand: var(--bmds-color-blue);
    --bmds-surface-accent: var(--bmds-color-green);
    --bmds-surface-tint: var(--bmds-color-lavender);
    --bmds-surface-mint: var(--bmds-color-mint);
    --bmds-surface-ink: var(--bmds-color-ink);
    --bmds-on-surface-brand: var(--bmds-color-white);
    --bmds-on-surface-accent: var(--bmds-color-ink);
    --bmds-on-surface-ink: var(--bmds-color-white);

    /* Eigene Tokens statt geaenderter `--bmds-surface-*`: an den
       flachen Werten haengen weitere Stellen, die flach bleiben
       muessen. */
    --bmds-gradient-hero: linear-gradient(158deg, var(--bmds-color-green) 0%, var(--bmds-color-green-light) 46%, var(--bmds-color-lavender) 100%);
    --bmds-gradient-stats: linear-gradient(135deg, var(--bmds-color-blue) 0%, var(--bmds-color-blue-deep) 100%);

    /* Beginnt genau dort, wo der helle Verlauf endet, damit zwei
       Baender untereinander ohne Kante ineinander uebergehen. */
    --bmds-gradient-stats-deep: linear-gradient(135deg, var(--bmds-color-blue-deep) 0%, var(--bmds-color-blue-night) 100%);

    --bmds-container: 77.5rem;
    --bmds-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --bmds-section-y: clamp(3rem, 7vw, 5.5rem);

    /* Hoehe der klebenden Kopfzeile, Basis fuer `scroll-margin-top`. */
    --bmds-header-h: 5.75rem;

    --bmds-weight-light: 300;

    --bmds-size-display: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
    --bmds-size-stat: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
    --bmds-size-h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
    --bmds-size-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.5625rem);
    --bmds-size-h4: var(--kern-font-size-18);
    --bmds-size-tile: 1.4375rem;
    --bmds-size-lead: 1.1875rem;
    --bmds-size-body: 1.0625rem;
    --bmds-size-small: 0.9375rem;
    --bmds-size-meta: var(--kern-font-size-14);
    --bmds-size-label: 0.8125rem;

    --bmds-size-quote: var(--kern-font-size-21);
    --bmds-size-action: var(--kern-font-size-16);
    --bmds-size-caption: var(--kern-font-size-12);
    --bmds-size-badge: 0.6875rem;

    --bmds-tracking-caps: 0.12em;
    --bmds-tracking-caps-tight: 0.1em;
    --bmds-tracking-heading: -0.01em;

    --bmds-measure-prose: 74ch;
    --bmds-measure-lead: 62ch;
    --bmds-measure-heading: 32ch;

    --bmds-leading-heading: 1.25;
    --bmds-leading-compact: 1.5;

    /* Eigenes Token statt geaendertem Default: `body` behaelt 1.6, weil
       daran auch Navigation, Badges und Labels haengen. */
    --bmds-leading-prose: 1.75;

    --bmds-size-legal: var(--kern-font-size-18);
    --bmds-leading-legal: 1.8;
    --bmds-measure-legal: 70ch;
    --bmds-legal-y: clamp(2.375rem, 9vw, 4rem);

    /* Fallback-Stack, weil KERN nur `sans-serif` hinter Fira Sans setzt
       und die Schrift erst nachlaedt. */
    --kern-typography-font-family-fira-sans: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Derselbe Selektorsatz wie in kern.css, damit die Overrides auch in
   `.kern-light`-Baendern greifen. */

:root,
[data-kern-theme="light"],
.kern-light {
    --kern-color-layout-text-default: var(--bmds-color-ink);
    --kern-color-layout-text-muted: var(--bmds-color-ink-muted);
    --kern-color-layout-background-default: var(--bmds-color-white);
    --kern-color-layout-border: var(--bmds-color-line);
    --kern-color-decorative-border-default: var(--bmds-color-line);
    --kern-color-decorative-brand-default: var(--bmds-color-blue);

    --kern-color-action-default: var(--bmds-color-ink);
    --kern-color-action-on-default: var(--bmds-color-white);
}

[data-kern-theme="dark"],
.kern-dark {
    --kern-color-layout-text-default: var(--bmds-color-white);
    --kern-color-layout-text-muted: var(--bmds-color-muted-oncolor);
    --kern-color-layout-background-default: var(--bmds-surface-brand);
    --kern-color-layout-border: var(--bmds-color-line-oncolor);
    --kern-color-decorative-border-default: var(--bmds-color-line-oncolor);
    --kern-color-decorative-brand-default: var(--bmds-color-green);

    --kern-color-action-default: var(--bmds-color-white);
    --kern-color-action-on-default: var(--bmds-color-blue);
}