/**
 * Central design tokens — edit here first.
 * Shell section controls sidebar, header, nav, user menu.
 */

:root {
    /* ── Brand palette (reference: forest teal-green) ──────── */
    --app-brand-900: #1e3530;
    --app-brand-800: #2d4a43;
    --app-brand-700: #3a5c54;
    --app-brand-600: #4a6e65;
    --app-brand-100: #e8f0ee;
    --app-brand-50: #f3f7f6;

    /* ── Brand / accent (Flux) ───────────────────────────── */
    --color-accent: var(--app-brand-800);
    --color-accent-content: var(--app-brand-800);
    --color-accent-foreground: var(--color-white);

    /* ── Shell layout ────────────────────────────────────── */
    --app-sidebar-expanded-width: 16rem;
    --app-sidebar-collapsed-width: 3.5rem;
    --app-shell-main-padding: 1.5rem;
    --app-shell-main-padding-lg: 2rem;
    --app-shell-header-min-height: 3.5rem;

    /* ── Shell surfaces ──────────────────────────────────── */
    --app-shell-bg: #f5f6f4;
    --app-shell-sidebar-bg: #fafafa;
    --app-shell-sidebar-border: #e8e8e6;
    --app-shell-main-bg: #f5f6f4;
    --app-shell-header-bg: transparent;
    --app-shell-elevated-bg: var(--color-white);
    --app-shell-menu-bg: var(--color-white);
    --app-shell-menu-border: var(--color-zinc-200);

    /* ── Shell text ──────────────────────────────────────── */
    --app-shell-text: var(--color-zinc-800);
    --app-shell-text-muted: var(--color-zinc-500);
    --app-shell-text-subtle: var(--color-zinc-400);
    --app-shell-brand-text: var(--color-zinc-800);

    /* ── Shell nav ───────────────────────────────────────── */
    --app-shell-nav-radius: var(--radius-lg);
    --app-shell-nav-text: var(--color-zinc-500);
    --app-shell-nav-text-hover: var(--color-zinc-800);
    --app-shell-nav-bg-hover: color-mix(in oklab, var(--color-zinc-800) 5%, transparent);
    --app-shell-nav-current-text: var(--app-brand-800);
    --app-shell-nav-current-bg: var(--app-brand-100);
    --app-shell-nav-current-shadow: none;

    /* ── Shell avatar / menu items ─────────────────────── */
    --app-shell-avatar-bg: var(--color-zinc-200);
    --app-shell-avatar-text: var(--color-zinc-800);
    --app-shell-menu-item-text: var(--color-zinc-800);
    --app-shell-menu-item-bg-hover: var(--color-zinc-50);
    --app-shell-menu-muted-text: var(--color-zinc-500);

    /* ── Shell chrome ──────────────────────────────────────── */
    --app-shell-icon-button-text: var(--color-zinc-500);
    --app-shell-icon-button-text-hover: var(--color-zinc-800);
    --app-shell-icon-button-bg-hover: color-mix(in oklab, var(--color-zinc-800) 5%, transparent);
    --app-shell-profile-bg-hover: color-mix(in oklab, var(--color-zinc-800) 5%, transparent);
    --app-shell-collapse-text: var(--color-zinc-500);
    --app-shell-collapse-text-hover: var(--color-zinc-800);
    --app-shell-tooltip-bg: var(--color-zinc-800);
    --app-shell-tooltip-text: var(--color-white);
    --app-shell-backdrop: rgb(0 0 0 / 0.1);
    --app-shell-focus-ring: var(--app-brand-700);

    /* ── Shell footer (website + legal outbound links) ───── */
    --app-shell-footer-padding-top: 1.25rem;
    --app-shell-footer-padding-bottom: 1.25rem;
    --app-shell-footer-gap: 0.75rem 1.25rem;
    --app-shell-footer-border: var(--app-shell-sidebar-border);
    --app-shell-footer-link-text: var(--app-shell-text-muted);
    --app-shell-footer-link-text-hover: var(--app-shell-text);
    --app-shell-footer-website-text: var(--app-shell-text);
    --app-shell-footer-website-text-hover: var(--app-brand-700);

    /* ── Shell badges / indicators ───────────────────────── */
    --app-shell-nav-badge-text: var(--color-blue-800);
    --app-shell-nav-badge-bg: color-mix(in oklab, var(--color-blue-400) 20%, transparent);
    --app-shell-nav-label-text: var(--color-zinc-700);
    --app-shell-nav-label-bg: #f4f4f5;
    --app-shell-notification-dot: var(--color-zinc-500);
    --app-shell-notification-highlight-text: var(--color-blue-700);
    --app-shell-notification-highlight-bg: color-mix(in oklab, var(--color-blue-500) 16%, transparent);
    --app-shell-notification-highlight-bg-hover: color-mix(in oklab, var(--color-blue-500) 22%, transparent);

    /* ── Shared (non-shell) ──────────────────────────────── */
    --app-radius-control: var(--radius-lg);
    --app-radius-card: var(--radius-lg);
    --livewire-progress-bar-color: #2299dd;

    /* ── Content: typography ─────────────────────────────── */
    --app-content-heading: var(--color-zinc-800);
    --app-content-body-strong: var(--color-zinc-900);
    --app-content-text: var(--color-zinc-700);
    --app-content-text-muted: var(--color-zinc-500);
    --app-content-text-subtle: var(--color-zinc-400);
    --app-content-meta-label: var(--color-zinc-500);

    /* ── Content: surfaces ───────────────────────────────── */
    --app-content-panel-bg: var(--color-zinc-50);
    --app-content-panel-border: color-mix(in oklab, var(--color-zinc-200) 60%, transparent);
    --app-content-card-bg: var(--color-white);
    --app-content-card-border: #ececec;
    --app-content-card-radius: var(--radius-xl);
    --app-content-callout-border: var(--color-zinc-200);
    --app-content-callout-bg: var(--color-white);
    --app-content-callout-heading: var(--color-zinc-800);
    --app-content-callout-text: var(--color-zinc-500);
    --app-content-callout-icon: var(--color-zinc-400);

    /* ── Content: forms ──────────────────────────────────── */
    --app-content-label: var(--color-zinc-800);
    --app-content-input-bg: var(--color-white);
    --app-content-input-border: var(--color-zinc-200);
    --app-content-input-border-strong: color-mix(in oklab, var(--color-zinc-300) 80%, transparent);
    --app-content-input-text: var(--color-zinc-700);
    --app-content-input-placeholder: var(--color-zinc-400);
    --app-content-input-focus-ring: var(--color-accent);
    --app-content-error: var(--color-red-500);
    --app-content-control-height: 2.5rem;

    /* ── Content: buttons (secondary / outline) ──────────── */
    --app-content-button-secondary-bg: var(--color-white);
    --app-content-button-secondary-bg-hover: var(--color-zinc-50);
    --app-content-button-secondary-text: var(--color-zinc-800);
    --app-content-button-secondary-border: var(--color-zinc-200);
    --app-content-button-tonal-bg: var(--app-brand-100);
    --app-content-button-tonal-bg-hover: color-mix(in oklab, var(--app-brand-100) 75%, var(--app-brand-800));
    --app-content-button-tonal-text: var(--app-brand-800);
    --app-content-button-ghost-text: var(--color-zinc-600);
    --app-content-button-ghost-text-hover: var(--color-zinc-800);
    --app-content-button-ghost-bg-hover: color-mix(in oklab, var(--color-zinc-800) 5%, transparent);
    --app-content-button-destructive-text: #b91c1c;
    --app-content-button-destructive-text-hover: #991b1b;
    --app-content-button-destructive-border: color-mix(in oklab, var(--color-red-500) 40%, var(--color-zinc-200));
    --app-content-button-destructive-bg: color-mix(in oklab, var(--color-red-500) 8%, var(--color-white));
    --app-content-button-destructive-bg-hover: color-mix(in oklab, var(--color-red-500) 14%, var(--color-white));
    --app-content-button-destructive-bold-bg: var(--color-red-600);
    --app-content-button-destructive-bold-text: var(--color-white);

    /* ── Content: Fernstudium schedule pause block ───────── */
    --app-fernstudium-schedule-break-bg: color-mix(in oklab, var(--color-red-500) 2.5%, var(--app-content-card-bg));
    --app-fernstudium-schedule-break-border: color-mix(in oklab, var(--color-red-500) 10%, var(--app-content-card-border));
    --app-fernstudium-schedule-break-icon: color-mix(in oklab, var(--color-red-600) 28%, var(--color-zinc-500));

    /* ── Content: table ──────────────────────────────────── */
    --app-content-table-header-text: var(--color-zinc-800);
    --app-content-table-border: color-mix(in oklab, var(--color-zinc-800) 10%, transparent);
    --app-content-table-cell-text: var(--color-zinc-800);

    /* ── Content: badges ─────────────────────────────────── */
    --app-content-badge-info-text: var(--app-brand-800);
    --app-content-badge-info-bg: var(--app-brand-100);
    --app-content-badge-success-text: #166534;
    --app-content-badge-success-bg: var(--app-brand-100);
    --app-content-badge-warning-text: #9a3412;
    --app-content-badge-warning-bg: #fff4e5;
    --app-content-badge-neutral-text: #52525b;
    --app-content-badge-neutral-bg: #f4f4f5;
    --app-content-link: var(--app-brand-800);
    --app-content-mandate-text: var(--app-brand-600);

    /* ── Content: pagination ─────────────────────────────── */
    --app-content-pagination-border: var(--app-content-card-border);
    --app-content-pagination-bg: var(--app-content-card-bg);
    --app-content-pagination-active-bg: var(--app-brand-800);
    --app-content-pagination-active-text: var(--color-white);
    --app-content-pagination-text: #71717a;
    --app-content-pagination-disabled-opacity: 0.45;

    /* ── Content: forms (choice controls, checkout) ──────── */
    --app-content-control-border: var(--color-zinc-300);
    --app-content-segmented-track-bg: var(--app-content-badge-neutral-bg);
    --app-content-segmented-text: var(--color-zinc-600);
    --app-content-segmented-selected-bg: var(--app-content-card-bg);
    --app-content-segmented-selected-text: var(--app-content-heading);
    --app-content-segmented-selected-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    --app-content-participant-avatar-size: 2rem;
    --app-content-participant-avatar-gap: 0.75rem;
    --app-content-participant-contact-icon-size: 1.25rem;
    --app-content-participant-contact-gap: 0.375rem;
    --app-content-feedback-kanban-inline: 0;
    --app-content-feedback-kanban-block-end: 0.5rem;
    --app-content-control-bg: var(--color-white);
    --app-content-choice-card-bg: var(--color-white);
    --app-content-choice-card-border: color-mix(in oklab, var(--color-zinc-800) 15%, transparent);
    --app-content-choice-card-bg-checked: color-mix(in oklab, var(--color-accent) 2%, var(--color-white));
    --app-content-dl-label: var(--color-zinc-500);
    --app-content-dl-value: var(--color-zinc-900);
    --app-content-summary-box-bg: var(--color-zinc-50);
    --app-content-summary-box-border: var(--color-zinc-200);

    /* ── Content: dashboard enrollment cards ─────────────── */
    --app-enrollment-progress-track: var(--color-zinc-200);
    --app-enrollment-progress-fill: var(--app-brand-700);
    --app-enrollment-progress-height: 0.375rem;
    --app-enrollment-grid-gap: 1rem;
    --app-enrollment-next-step-text: var(--color-zinc-600);
    --app-enrollment-kind-course-text: var(--app-brand-800);
    --app-enrollment-kind-course-bg: var(--app-brand-100);
    --app-enrollment-kind-fernstudium-text: var(--app-enrollment-kind-course-text);
    --app-enrollment-kind-fernstudium-bg: var(--app-enrollment-kind-course-bg);
    /* ── Content: course event timeline ──────────────────── */
    --app-content-timeline-line: var(--color-zinc-200);
    --app-content-timeline-incomplete-border: var(--color-zinc-100);
    --app-content-timeline-incomplete-text: var(--color-zinc-500);
    --app-content-timeline-current-text: var(--color-zinc-800);
    --app-content-timeline-active-bg: color-mix(in oklab, var(--app-brand-600) 16%, var(--app-brand-100));
    --app-content-timeline-active-text: var(--app-brand-600);
    --app-content-timeline-active-border: color-mix(in oklab, var(--app-brand-600) 24%, var(--app-content-event-card-border));
    --app-content-timeline-calendar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5.75 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM5 10.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM10.25 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7.25 8.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM8 9.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0-1.5Z'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.75 1a.75.75 0 0 0-.75.75V3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2V1.75a.75.75 0 0 0-1.5 0V3h-5V1.75A.75.75 0 0 0 4.75 1ZM3.5 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v4.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --app-content-event-hover-bg: var(--color-zinc-50);
    --app-content-event-card-bg: var(--color-white);
    --app-content-event-card-border: var(--color-zinc-200);
    --app-content-event-card-radius: var(--radius-xl);
    --app-content-event-card-gap: 0.75rem;
    --app-content-event-summary-padding: 0.75rem 1rem;
    --app-content-event-summary-padding-block: 0.75rem;
    --app-content-event-summary-padding-inline: 1rem;
    --app-content-event-summary-header-min-height: 2rem;
    --app-content-event-summary-collapsed-block-size: calc(
        2 * var(--app-content-event-summary-padding-block) + var(--app-content-event-summary-header-min-height)
    );
    --app-content-event-panel-padding: 1rem;
    --app-content-event-action-gap: 0.5rem;
    --app-content-event-admin-gap: 0.75rem;
    --app-content-event-admin-padding: 0.75rem 1rem;
    --app-content-event-admin-bg: var(--color-zinc-50);
    --app-content-event-admin-border: var(--color-zinc-200);
    --app-content-event-admin-label: var(--color-zinc-500);
    --app-content-event-feed-bg: var(--color-white);
    --app-content-event-feed-border: var(--color-zinc-200);
    --app-content-event-feed-radius: var(--radius-xl);
    --app-content-event-feed-padding: 1rem;
    --app-content-callout-success-border: color-mix(in oklab, var(--app-brand-600) 35%, transparent);
    --app-content-callout-success-bg: var(--app-brand-100);
    --app-content-callout-success-heading: #166534;
    --app-content-callout-success-text: #15803d;
    --app-content-callout-success-icon: var(--app-brand-600);
    --app-content-callout-warning-border: #fcd34d;
    --app-content-callout-warning-bg: #fffbeb;
    --app-content-callout-warning-heading: #a16207;
    --app-content-callout-warning-text: #a16207;
    --app-content-callout-warning-icon: #ca8a04;
}

.dark {
    --color-accent: var(--color-white);
    --color-accent-content: var(--color-white);
    --color-accent-foreground: var(--color-neutral-800);

    --app-shell-bg: var(--color-zinc-800);
    --app-shell-sidebar-bg: var(--color-zinc-900);
    --app-shell-sidebar-border: var(--color-zinc-700);
    --app-shell-main-bg: var(--color-zinc-800);
    --app-shell-elevated-bg: var(--color-zinc-800);
    --app-shell-menu-bg: var(--color-zinc-700);
    --app-shell-menu-border: var(--color-zinc-600);

    --app-shell-text: var(--color-white);
    --app-shell-text-muted: color-mix(in oklab, var(--color-white) 80%, transparent);
    --app-shell-text-subtle: var(--color-zinc-400);
    --app-shell-brand-text: var(--color-white);

    --app-shell-nav-text: color-mix(in oklab, var(--color-white) 80%, transparent);
    --app-shell-nav-text-hover: var(--color-white);
    --app-shell-nav-bg-hover: color-mix(in oklab, var(--color-white) 7%, transparent);
    --app-shell-nav-current-text: var(--app-brand-100);
    --app-shell-nav-current-bg: color-mix(in oklab, var(--app-brand-700) 50%, transparent);
    --app-shell-nav-current-shadow: none;

    --app-shell-avatar-bg: var(--color-zinc-600);
    --app-shell-avatar-text: var(--color-white);
    --app-shell-menu-item-text: var(--color-white);
    --app-shell-menu-item-bg-hover: var(--color-zinc-600);
    --app-shell-menu-muted-text: color-mix(in oklab, var(--color-white) 70%, transparent);

    --app-shell-icon-button-text: var(--color-zinc-400);
    --app-shell-icon-button-text-hover: var(--color-white);
    --app-shell-icon-button-bg-hover: color-mix(in oklab, var(--color-white) 15%, transparent);
    --app-shell-profile-bg-hover: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-shell-collapse-text: var(--color-zinc-400);
    --app-shell-collapse-text-hover: var(--color-white);
    --app-shell-tooltip-bg: var(--color-zinc-700);
    --app-shell-tooltip-text: var(--color-white);

    --app-shell-nav-badge-text: var(--color-blue-200);
    --app-shell-nav-badge-bg: color-mix(in oklab, var(--color-blue-400) 40%, transparent);
    --app-shell-nav-label-text: var(--color-zinc-200);
    --app-shell-nav-label-bg: color-mix(in oklab, var(--color-zinc-400) 40%, transparent);
    --app-shell-notification-dot: var(--color-zinc-400);
    --app-shell-notification-highlight-text: var(--color-blue-300);
    --app-shell-notification-highlight-bg: color-mix(in oklab, var(--color-blue-400) 18%, transparent);
    --app-shell-notification-highlight-bg-hover: color-mix(in oklab, var(--color-blue-400) 24%, transparent);

    --app-shell-footer-website-text: var(--app-shell-text);
    --app-shell-footer-website-text-hover: var(--app-brand-100);

    --app-content-heading: var(--color-white);
    --app-content-body-strong: var(--color-zinc-100);
    --app-content-text: var(--color-zinc-300);
    --app-content-text-muted: color-mix(in oklab, var(--color-white) 70%, transparent);
    --app-content-text-subtle: var(--color-zinc-400);
    --app-content-meta-label: var(--color-zinc-400);

    --app-content-panel-bg: color-mix(in oklab, var(--color-zinc-900) 70%, transparent);
    --app-content-panel-border: var(--color-zinc-800);
    --app-content-card-bg: var(--color-zinc-900);
    --app-content-card-border: var(--color-zinc-800);
    --app-content-callout-border: color-mix(in oklab, var(--color-white) 5%, transparent);
    --app-content-callout-bg: color-mix(in oklab, var(--color-zinc-400) 10%, transparent);
    --app-content-callout-heading: var(--color-zinc-200);
    --app-content-callout-text: var(--color-zinc-300);
    --app-content-callout-icon: var(--color-zinc-400);

    --app-content-label: var(--color-white);
    --app-content-input-bg: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-content-input-border: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-content-input-border-strong: transparent;
    --app-content-input-text: var(--color-zinc-300);
    --app-content-input-placeholder: var(--color-zinc-400);

    --app-content-button-secondary-bg: var(--color-zinc-700);
    --app-content-button-secondary-bg-hover: color-mix(in oklab, var(--color-zinc-600) 75%, transparent);
    --app-content-button-secondary-text: var(--color-white);
    --app-content-button-secondary-border: var(--color-zinc-600);
    --app-content-button-tonal-bg: color-mix(in oklab, var(--app-brand-700) 35%, transparent);
    --app-content-button-tonal-bg-hover: color-mix(in oklab, var(--app-brand-700) 50%, transparent);
    --app-content-button-tonal-text: var(--app-brand-100);
    --app-content-button-ghost-text: var(--color-zinc-400);
    --app-content-button-ghost-text-hover: var(--color-zinc-200);
    --app-content-button-ghost-bg-hover: color-mix(in oklab, var(--color-white) 8%, transparent);
    --app-content-button-destructive-text: #fca5a5;
    --app-content-button-destructive-text-hover: #fecaca;
    --app-content-button-destructive-border: color-mix(in oklab, var(--color-red-400) 35%, var(--color-zinc-700));
    --app-content-button-destructive-bg: color-mix(in oklab, var(--color-red-500) 14%, var(--color-zinc-900));
    --app-content-button-destructive-bg-hover: color-mix(in oklab, var(--color-red-500) 22%, var(--color-zinc-900));
    --app-content-button-destructive-bold-bg: var(--color-red-600);
    --app-content-button-destructive-bold-text: var(--color-white);

    --app-fernstudium-schedule-break-bg: color-mix(in oklab, var(--color-red-500) 6%, var(--app-content-card-bg));
    --app-fernstudium-schedule-break-border: color-mix(in oklab, var(--color-red-400) 12%, var(--app-content-card-border));
    --app-fernstudium-schedule-break-icon: color-mix(in oklab, var(--color-red-400) 32%, var(--color-zinc-400));

    --app-content-table-header-text: var(--color-white);
    --app-content-table-border: color-mix(in oklab, var(--color-white) 20%, transparent);
    --app-content-table-cell-text: var(--color-white);

    --app-content-badge-info-text: var(--color-blue-200);
    --app-content-badge-info-bg: color-mix(in oklab, var(--color-blue-400) 40%, transparent);
    --app-content-badge-success-text: var(--color-white);
    --app-content-badge-success-bg: var(--app-brand-700);
    --app-content-badge-warning-text: #fdba74;
    --app-content-badge-warning-bg: color-mix(in oklab, var(--color-orange-400) 25%, transparent);
    --app-content-badge-neutral-text: var(--color-zinc-300);
    --app-content-badge-neutral-bg: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
    --app-content-link: var(--app-brand-100);
    --app-content-mandate-text: #8fbfb0;

    --app-content-pagination-border: var(--app-content-card-border);
    --app-content-pagination-bg: var(--app-content-card-bg);
    --app-content-pagination-active-bg: var(--app-brand-700);
    --app-content-pagination-active-text: var(--color-white);
    --app-content-pagination-text: var(--color-zinc-400);
    --app-content-pagination-disabled-opacity: 0.45;

    --app-content-control-border: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-content-segmented-track-bg: color-mix(in oklab, var(--color-white) 8%, transparent);
    --app-content-segmented-text: var(--color-zinc-300);
    --app-content-segmented-selected-bg: var(--app-content-card-bg);
    --app-content-segmented-selected-text: var(--app-content-heading);
    --app-content-segmented-selected-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    --app-content-participant-avatar-size: 2rem;
    --app-content-participant-avatar-gap: 0.75rem;
    --app-content-participant-contact-icon-size: 1.25rem;
    --app-content-participant-contact-gap: 0.375rem;
    --app-content-feedback-kanban-inline: 0;
    --app-content-feedback-kanban-block-end: 0.5rem;
    --app-content-control-bg: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-content-choice-card-bg: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-content-choice-card-border: color-mix(in oklab, var(--color-white) 10%, transparent);
    --app-content-choice-card-bg-checked: color-mix(in oklab, var(--color-white) 15%, transparent);
    --app-content-dl-label: var(--color-zinc-400);
    --app-content-dl-value: var(--color-zinc-100);
    --app-content-summary-box-bg: var(--color-zinc-800);
    --app-content-summary-box-border: var(--color-zinc-700);

    --app-enrollment-progress-track: var(--color-zinc-700);
    --app-enrollment-progress-fill: var(--app-brand-600);
    --app-enrollment-next-step-text: var(--color-zinc-300);
    --app-enrollment-kind-course-text: var(--app-brand-100);
    --app-enrollment-kind-course-bg: color-mix(in oklab, var(--app-brand-600) 35%, transparent);
    --app-enrollment-kind-fernstudium-text: var(--app-enrollment-kind-course-text);
    --app-enrollment-kind-fernstudium-bg: var(--app-enrollment-kind-course-bg);
    --app-content-timeline-line: var(--color-zinc-700);
    --app-content-timeline-incomplete-border: var(--color-zinc-700);
    --app-content-timeline-incomplete-text: var(--color-zinc-300);
    --app-content-timeline-current-text: var(--color-zinc-300);
    --app-content-timeline-active-bg: color-mix(in oklab, var(--app-brand-600) 44%, transparent);
    --app-content-timeline-active-text: var(--color-white);
    --app-content-timeline-active-border: color-mix(in oklab, var(--app-brand-600) 50%, transparent);
    --app-content-timeline-calendar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5.75 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM5 10.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM10.25 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7.25 8.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM8 9.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0-1.5Z'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.75 1a.75.75 0 0 0-.75.75V3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2V1.75a.75.75 0 0 0-1.5 0V3h-5V1.75A.75.75 0 0 0 4.75 1ZM3.5 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v4.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --app-content-event-hover-bg: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
    --app-content-event-card-bg: var(--color-zinc-900);
    --app-content-event-card-border: var(--color-zinc-800);
    --app-content-event-card-radius: var(--radius-xl);
    --app-content-event-card-gap: 0.75rem;
    --app-content-event-summary-padding: 0.75rem 1rem;
    --app-content-event-summary-padding-block: 0.75rem;
    --app-content-event-summary-padding-inline: 1rem;
    --app-content-event-summary-header-min-height: 2rem;
    --app-content-event-summary-collapsed-block-size: calc(
        2 * var(--app-content-event-summary-padding-block) + var(--app-content-event-summary-header-min-height)
    );
    --app-content-event-panel-padding: 1rem;
    --app-content-event-action-gap: 0.5rem;
    --app-content-event-admin-gap: 0.75rem;
    --app-content-event-admin-padding: 0.75rem 1rem;
    --app-content-event-admin-bg: color-mix(in oklab, var(--color-zinc-800) 65%, transparent);
    --app-content-event-admin-border: var(--color-zinc-800);
    --app-content-event-admin-label: var(--color-zinc-400);
    --app-content-event-feed-bg: var(--color-zinc-900);
    --app-content-event-feed-border: var(--color-zinc-800);
    --app-content-event-feed-radius: var(--radius-xl);
    --app-content-event-feed-padding: 1rem;
    --app-content-callout-success-border: color-mix(in oklab, var(--app-brand-600) 55%, transparent);
    --app-content-callout-success-bg: color-mix(in oklab, var(--app-brand-700) 35%, transparent);
    --app-content-callout-success-heading: var(--color-white);
    --app-content-callout-success-text: var(--app-brand-100);
    --app-content-callout-success-icon: var(--app-brand-100);
    --app-content-callout-warning-border: color-mix(in oklab, var(--color-yellow-400) 50%, transparent);
    --app-content-callout-warning-bg: color-mix(in oklab, var(--color-yellow-400) 16%, transparent);
    --app-content-callout-warning-heading: var(--color-yellow-200);
    --app-content-callout-warning-text: var(--color-yellow-200);
    --app-content-callout-warning-icon: var(--color-yellow-400);
}