/**
 * CareDesk Design Tokens
 *
 * Zweischichtige Token-Architektur nach Vuexy-Vorbild:
 *   1. Primitive Tokens  — konkrete Werte (Farben, Raster, Radien, Schatten)
 *   2. Semantische Tokens — Rollen-Aliase (text, bg, border, accent ...)
 *
 * Die Komponenten-CSS darf ausschließlich semantische Tokens verwenden.
 * Wenn ein neues UI-Muster einen Wert braucht, den es noch nicht gibt,
 * wird zuerst hier ein semantisches Token ergänzt, dann dort verwendet.
 *
 * Schriftart: Public Sans (SIL OFL 1.1, lokal gehostet)
 * Quelle:     docs/ui/vuexy-token-inventory.md
 */

:root {
	/* -----------------------------------------------------------------
	 * 1. PRIMITIVE TOKENS
	 * ----------------------------------------------------------------- */

	/* --- Farb-Paletten: Primary ---------------------------------- */
	--cd-color-primary-50:  #f0efff;
	--cd-color-primary-100: #e8e6fd;
	--cd-color-primary-200: #d0ccfb;
	--cd-color-primary-300: #b1a9f8;
	--cd-color-primary-400: #9289f4;
	--cd-color-primary-500: #7367f0;
	--cd-color-primary-600: #685cd8;
	--cd-color-primary-700: #5a50bc;
	--cd-color-primary-800: #453d8f;
	--cd-color-primary-900: #2e294c;

	/* --- Farb-Paletten: Secondary (neutral grey-blue) ------------ */
	--cd-color-secondary-500: #808390;

	/* --- Farb-Paletten: Status ----------------------------------- */
	--cd-color-success-500: #28c76f;
	--cd-color-success-100: #dcf6e4;
	--cd-color-info-500:    #00bad1;
	--cd-color-info-100:    #c5f0f4;
	--cd-color-warning-500: #ff9f43;
	--cd-color-warning-100: #ffe7cf;
	--cd-color-error-500:   #ff4c51;
	--cd-color-error-100:   #ffd7d7;

	/* --- Farb-Paletten: Gray (Light-Mode-Reihenfolge) ------------ */
	--cd-color-gray-50:  #f8f7fa;
	--cd-color-gray-100: #eaeaec;
	--cd-color-gray-200: #dbdade;
	--cd-color-gray-300: #c2c1c7;
	--cd-color-gray-400: #a5a3ae;
	--cd-color-gray-500: #8a8894;
	--cd-color-gray-600: #6f6b7d;
	--cd-color-gray-700: #5d5865;
	--cd-color-gray-800: #4b465c;
	--cd-color-gray-900: #433c50;

	/* --- Theme-Base (Light) – für alpha-gemischte Semantik ------- */
	--cd-color-base-rgb:    47, 43, 61;   /* #2f2b3d */
	--cd-color-paper:       #ffffff;
	--cd-color-body-bg:     #f8f7fa;
	--cd-color-backdrop-rgb: 23, 25, 37;  /* #171925 */

	/* --- Spacing (4-px-Raster) ----------------------------------- */
	--cd-space-0:    0;
	--cd-space-1:    4px;
	--cd-space-2:    8px;
	--cd-space-3:   12px;
	--cd-space-4:   16px;
	--cd-space-5:   20px;
	--cd-space-6:   24px;
	--cd-space-7:   28px;
	--cd-space-8:   32px;
	--cd-space-9:   36px;
	--cd-space-10:  40px;
	--cd-space-12:  48px;
	--cd-space-14:  56px;
	--cd-space-16:  64px;
	--cd-space-25: 100px;

	/* --- Border-Radius ------------------------------------------- */
	--cd-radius-xs:    2px;
	--cd-radius-sm:    4px;
	--cd-radius-md:    6px;
	--cd-radius-lg:    8px;
	--cd-radius-xl:   10px;
	--cd-radius-2xl:  16px;  /* für größere Karten / Dialoge */
	--cd-radius-pill: 500px;

	/* --- Elevation (generische Gray-Shadows) --------------------- */
	--cd-shadow-xs: 0 1px 6px 0 rgba(var(--cd-color-base-rgb), 0.10);
	--cd-shadow-sm: 0 2px 8px 0 rgba(var(--cd-color-base-rgb), 0.12);
	--cd-shadow-md: 0 3px 12px 0 rgba(var(--cd-color-base-rgb), 0.14);
	--cd-shadow-lg: 0 4px 18px 0 rgba(var(--cd-color-base-rgb), 0.16);
	--cd-shadow-xl: 0 5px 30px 0 rgba(var(--cd-color-base-rgb), 0.18);

	/* --- Elevation (farbige Shadows für Buttons) ----------------- */
	--cd-shadow-primary-sm: 0 2px 6px 0 rgba(115, 103, 240, 0.30);
	--cd-shadow-primary-md: 0 4px 16px 0 rgba(115, 103, 240, 0.40);
	--cd-shadow-primary-lg: 0 6px 20px 0 rgba(115, 103, 240, 0.50);
	--cd-shadow-success-md: 0 4px 16px 0 rgba(40, 199, 111, 0.40);
	--cd-shadow-warning-md: 0 4px 16px 0 rgba(255, 159, 67, 0.40);
	--cd-shadow-error-md:   0 4px 16px 0 rgba(255, 76, 81, 0.40);
	--cd-shadow-info-md:    0 4px 16px 0 rgba(0, 186, 209, 0.40);

	/* --- Schrift: Familie ---------------------------------------- */
	--cd-font-family: "Public Sans", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* --- Schrift: Gewichte --------------------------------------- */
	--cd-font-weight-regular: 400;
	--cd-font-weight-medium:  500;
	--cd-font-weight-semibold: 600;
	--cd-font-weight-bold:    700;

	/* --- Schrift: Größen ----------------------------------------- */
	--cd-font-size-overline:  12px;
	--cd-font-size-caption:   13px;
	--cd-font-size-body-sm:   13px;
	--cd-font-size-body:      15px;
	--cd-font-size-body-lg:   17px;
	--cd-font-size-h6:        15px;
	--cd-font-size-h5:        18px;
	--cd-font-size-h4:        24px;
	--cd-font-size-h3:        28px;
	--cd-font-size-h2:        38px;
	--cd-font-size-h1:        46px;

	/* --- Schrift: Zeilenhöhen ------------------------------------ */
	--cd-line-height-overline: 14px;
	--cd-line-height-caption:  18px;
	--cd-line-height-body-sm:  20px;
	--cd-line-height-body:     22px;
	--cd-line-height-body-lg:  26px;
	--cd-line-height-h6:       22px;
	--cd-line-height-h5:       28px;
	--cd-line-height-h4:       38px;
	--cd-line-height-h3:       42px;
	--cd-line-height-h2:       56px;
	--cd-line-height-h1:       68px;

	/* --- Layout-Maße --------------------------------------------- */
	--cd-container-max: 1140px;
	--cd-card-padding:    24px;
	--cd-form-gap:        24px;

	/* -----------------------------------------------------------------
	 * 2. SEMANTISCHE TOKENS (das, was Komponenten benutzen)
	 * ----------------------------------------------------------------- */

	/* --- Textfarben ---------------------------------------------- */
	--cd-text:          rgba(var(--cd-color-base-rgb), 0.90);
	--cd-text-muted:    rgba(var(--cd-color-base-rgb), 0.70);
	--cd-text-subtle:   rgba(var(--cd-color-base-rgb), 0.55);
	--cd-text-disabled: rgba(var(--cd-color-base-rgb), 0.40);
	--cd-text-on-accent: #ffffff;

	/* --- Oberflächen --------------------------------------------- */
	--cd-bg:          var(--cd-color-body-bg);
	--cd-bg-subtle:   #fafafa;
	--cd-surface:     var(--cd-color-paper);
	--cd-surface-alt: #f7f6f9;
	--cd-backdrop:    rgba(var(--cd-color-backdrop-rgb), 0.50);

	/* --- Linien und Trenner -------------------------------------- */
	--cd-border:        rgba(var(--cd-color-base-rgb), 0.22);
	--cd-border-strong: rgba(var(--cd-color-base-rgb), 0.38);
	--cd-divider:       rgba(var(--cd-color-base-rgb), 0.12);

	/* --- Interaktion --------------------------------------------- */
	--cd-action-hover:    rgba(var(--cd-color-base-rgb), 0.06);
	--cd-action-selected: rgba(var(--cd-color-base-rgb), 0.08);
	--cd-action-active:   rgba(var(--cd-color-base-rgb), 0.60);
	--cd-action-disabled: rgba(var(--cd-color-base-rgb), 0.30);

	/* --- Akzent-Farbe -------------------------------------------- */
	--cd-accent:       var(--cd-color-primary-500);
	--cd-accent-hover: var(--cd-color-primary-600);
	--cd-accent-soft:  var(--cd-color-primary-100);

	/* --- Status-Rollen ------------------------------------------- */
	--cd-success:      var(--cd-color-success-500);
	--cd-success-soft: var(--cd-color-success-100);
	--cd-info:         var(--cd-color-info-500);
	--cd-info-soft:    var(--cd-color-info-100);
	--cd-warning:      var(--cd-color-warning-500);
	--cd-warning-soft: var(--cd-color-warning-100);
	--cd-danger:       var(--cd-color-error-500);
	--cd-danger-soft:  var(--cd-color-error-100);

	/* --- Radien (semantisch) ------------------------------------- */
	--cd-radius-control: var(--cd-radius-md);  /* Buttons, Inputs */
	--cd-radius-card:    var(--cd-radius-lg);  /* Karten, Panels  */
	--cd-radius-surface: var(--cd-radius-2xl); /* Dialoge, Modals */

	/* --- Schatten (semantisch) ----------------------------------- */
	--cd-shadow-card:    var(--cd-shadow-sm);
	--cd-shadow-raised:  var(--cd-shadow-md);
	--cd-shadow-overlay: var(--cd-shadow-lg);
	--cd-shadow-modal:   var(--cd-shadow-xl);
}

/* --------------------------------------------------------------------
 * Schrift-Definition: Public Sans lokal, SIL OFL 1.1
 * Dateien werden später unter assets/shared/fonts/public-sans/ abgelegt.
 * -------------------------------------------------------------------- */

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/public-sans/PublicSans-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/public-sans/PublicSans-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Public Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/public-sans/PublicSans-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Public Sans";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/public-sans/PublicSans-Italic.woff2") format("woff2");
}