/**
 * DodiBee Theme Variables – Bee & Dodo Edition 🐝🦤
 *
 * DESIGN PHILOSOPHY:
 * - Bee & Dodo Branding: warm, einladend, freundlich
 * - Bee Yellow (#F6C644) als Primary Brand
 * - Dodo Brown (#6B5142) für Text mit gutem Kontrast
 * - Cream (#FFF1D6) als warmer Hintergrund
 * - Ink (#29231F) als primärer Text
 */

:root {
	/* ─── Typography ─── */
	--font-family: 'Inter', system-ui, -apple-system, sans-serif;
	--font-size-12: 0.75rem;
	--font-size-14: 0.875rem;
	--font-size-16: 1rem;
	--font-size-22: 1.375rem;
	--font-size-30: 1.875rem;
	--font-size-44: 2.75rem;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	/* ─── Text Styles ─── */
	--text-display-size: var(--font-size-44);
	--text-display-weight: var(--font-weight-medium);
	--text-display-line-height: 1.227;

	--text-title-size: var(--font-size-30);
	--text-title-weight: var(--font-weight-medium);
	--text-title-line-height: 1.333;

	--text-heading-lg-size: var(--font-size-22);
	--text-heading-lg-weight: var(--font-weight-regular);
	--text-heading-lg-line-height: 1.273;

	--text-heading-md-size: var(--font-size-16);
	--text-heading-md-weight: var(--font-weight-medium);
	--text-heading-md-line-height: 1.5;

	--text-heading-md-semibold-size: var(--font-size-16);
	--text-heading-md-semibold-weight: var(--font-weight-semibold);
	--text-heading-md-semibold-line-height: 1.5;

	--text-body-md-size: var(--font-size-14);
	--text-body-md-weight: var(--font-weight-regular);
	--text-body-md-line-height: 1.429;

	--text-body-sm-size: var(--font-size-12);
	--text-body-sm-weight: var(--font-weight-regular);
	--text-body-sm-line-height: 1.333;

	--text-label-md-size: var(--font-size-14);
	--text-label-md-weight: var(--font-weight-medium);
	--text-label-md-line-height: 1.429;

	--text-label-md-semibold-size: var(--font-size-14);
	--text-label-md-semibold-weight: var(--font-weight-semibold);
	--text-label-md-semibold-line-height: 1.429;

	--text-label-sm-semibold-size: var(--font-size-12);
	--text-label-sm-semibold-weight: var(--font-weight-semibold);
	--text-label-sm-semibold-line-height: 1.333;

	/* ─── Spacing ─── */
	--spacing-2: 2px;
	--spacing-4: 4px;
	--spacing-8: 8px;
	--spacing-12: 12px;
	--spacing-16: 16px;
	--spacing-20: 20px;
	--spacing-24: 24px;
	--spacing-32: 32px;
	--spacing-40: 40px;
	--spacing-48: 48px;
	--spacing-64: 64px;

	/* ─── Sizing ─── */
	--sizing-16: 16px;
	--sizing-20: 20px;
	--sizing-24: 24px;
	--sizing-36: 36px;
	--sizing-40: 40px;
	--sizing-48: 48px;
	--sizing-64: 64px;
	--sizing-80: 80px;

	/* ─── Radius ─── */
	--radius-4: 4px;
	--radius-8: 8px;
	--radius-12: 12px;
	--radius-16: 16px;
	--radius-full: 9999px;

	/* ─── Z-Index ─── */
	--z-index-header: 100;
	--z-index-fab: 150;
	--z-index-dropdown: 200;
	--z-index-overlay: 300;
	--z-index-popup: 400;
	/* lists/menus opened from inside a dialog (select, combobox) */
	--z-index-floating: 500;

	/* ─── Transition ─── */
	--transition-fast: 150ms ease;
	--transition-normal: 300ms ease;
	--transition-slow: 500ms ease;

	/* ─── Shadow (warmer tone for Crayon look) ─── */
	/* Paper look: hard offset shadows instead of soft blur */
	--color-shadow-ink: #29231F;
	--shadow-sm: 1px 1px 0 var(--color-shadow-ink);
	--shadow-md: 2px 2px 0 var(--color-shadow-ink);
	--shadow-lg: 3px 3px 0 var(--color-shadow-ink);
	/* Pillow surface (cards, lists, dialogs): fixed corners, gently bulging edges, shadow baked in */
	--pillow-surface: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Cpath%20d%3D'M24%2C10%20Q60%2C7.5%2096%2C10%20Q110%2C10%20110%2C24%20Q112.5%2C60%20110%2C96%20Q110%2C110%2096%2C110%20Q60%2C112.5%2024%2C110%20Q10%2C110%2010%2C96%20Q7.5%2C60%2010%2C24%20Q10%2C10%2024%2C10%20Z'%20fill%3D'%2329231F'%20transform%3D'translate(2%202)'%2F%3E%3Cpath%20d%3D'M24%2C10%20Q60%2C7.5%2096%2C10%20Q110%2C10%20110%2C24%20Q112.5%2C60%20110%2C96%20Q110%2C110%2096%2C110%20Q60%2C112.5%2024%2C110%20Q10%2C110%2010%2C96%20Q7.5%2C60%2010%2C24%20Q10%2C10%2024%2C10%20Z'%20fill%3D'%23FFF1D6'%20stroke%3D'%2329231F'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E");

	/* ═══════════════════════════════════════════════════════════════════════════
	   COLOR PRIMITIVES – Crayon Edition 🖍️
	   Radix-inspired 12-step scale. DO NOT use directly – use semantic tokens.
	   ═══════════════════════════════════════════════════════════════════════════ */

	/* ─── Sand (Neutral) – Cream to Ink palette ─── */
	--slate-1: #FFF1D6;
	--slate-2: #FAE9C8;
	--slate-3: #F2DDBA;
	--slate-4: #E8D0A8;
	--slate-5: #DCC294;
	--slate-6: #CEB27E;
	--slate-7: #B99B68;
	--slate-8: #9A8058;
	--slate-9: #7A6548;
	--slate-10: #5C4C38;
	--slate-11: #3F352A;
	--slate-12: #29231F;

	/* ─── Bee Yellow (Primary Brand) – Sunny yellow 🐝 ─── */
	--violet-1: #FFFDF5;
	--violet-2: #FEF9E4;
	--violet-3: #FEF3CD;
	--violet-4: #FDECB0;
	--violet-5: #FBE392;
	--violet-6: #F9D872;
	--violet-7: #F7CD52;
	--violet-8: #F6C644;
	--violet-9: #F6C644;
	--violet-10: #E89A24;
	--violet-11: #6B5142;
	--violet-12: #29231F;

	/* ─── Red (Error) – Crayon style, slightly muted 🔴 ─── */
	--red-1: #fefcfc;
	--red-2: #fdf7f6;
	--red-3: #fbeae8;
	--red-4: #f8dbd8;
	--red-5: #f4cbc6;
	--red-6: #eeb8b2;
	--red-7: #e49f98;
	--red-8: #d5807a;
	--red-9: #c45650;
	--red-10: #b34841;
	--red-11: #963c37;
	--red-12: #401a17;

	/* ─── Leaf Green (Success) – Warm leaf green 🌿 ─── */
	--green-1: #FBFDF8;
	--green-2: #F4FAF0;
	--green-3: #E8F3E2;
	--green-4: #DAE9D0;
	--green-5: #C8DCBB;
	--green-6: #B4CDA4;
	--green-7: #9CBB8A;
	--green-8: #89A872;
	--green-9: #78915A;
	--green-10: #68804D;
	--green-11: #576B40;
	--green-12: #2A3420;

	/* ─── Amber (Warning) – Warm orange-yellow 🟠 ─── */
	--amber-1: #fefdfb;
	--amber-2: #fefae8;
	--amber-3: #fef4c7;
	--amber-4: #fceaa6;
	--amber-5: #f9de85;
	--amber-6: #f2cd62;
	--amber-7: #e5b63e;
	--amber-8: #d19a1c;
	--amber-9: #c58a12;
	--amber-10: #b07a0e;
	--amber-11: #8c610b;
	--amber-12: #3a2906;

}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC COLOR TOKENS - LIGHT MODE
   3-Layer System: Canvas → Surface → Component
   ═══════════════════════════════════════════════════════════════════════════ */

/* :root too – "System" on a light device has no block of its own, only dark overrides it */
:root,
[data-theme="light"] {
	/* tell the browser which scheme we render – native controls/scrollbars match and
	   browser "auto dark" modes stop recolouring our artwork (e.g. the lottie bee) */
	color-scheme: light;
	/* ─── Background (3-Layer System) ─── */
	/* Canvas: App background – Warm cream */
	--color-bg-canvas: var(--slate-1);
	/* Surface: Cards, Panels – Slightly warmer */
	--color-bg-surface: var(--slate-2);
	/* Component: Interactive elements, hover states */
	--color-bg-component: var(--slate-3);
	--color-bg-component-hover: var(--slate-4);
	--color-bg-component-active: var(--slate-5);

	/* Legacy: Map to new system for backwards compatibility */
	--color-bg-primary: var(--color-bg-canvas);
	--color-bg-input: var(--slate-1);
	--color-bg-disabled: var(--slate-3);

	/* Brand (Bee Yellow) 🐝 */
	--color-bg-brand-default: var(--violet-9);
	--color-bg-brand-hover: var(--violet-10);
	--color-bg-brand-active: var(--violet-11);
	--color-bg-brand-subtle: var(--violet-3);

	/* Error (Red) */
	--color-bg-error-default: var(--red-9);
	--color-bg-error-hover: var(--red-10);
	--color-bg-error-active: var(--red-11);
	--color-bg-error-subtle: var(--red-3);

	/* ─── Text ─── */
	--color-text-primary: var(--slate-12);
	--color-text-secondary: var(--slate-11);
	--color-text-tertiary: var(--slate-9);
	--color-text-disabled: var(--slate-8);
	--color-text-inverse: var(--slate-12);
	--color-text-brand: var(--violet-11);
	--color-text-error: var(--red-11);
	--color-text-success: var(--green-11);
	--color-text-warning: var(--amber-11);

	/* ─── Border ─── */
	--color-border-default: var(--slate-6);
	--color-border-subtle: var(--slate-4);
	--color-border-input: var(--slate-11);
	--color-border-ink: var(--slate-12);
	--color-border-focus: var(--violet-8);
	--color-border-disabled: var(--slate-5);
	--color-border-error: var(--red-7);
	--color-border-success: var(--green-7);

	/* ─── Surface ─── */
	--color-surface-raised: var(--slate-1);
	--color-surface-sunken: var(--slate-2);
	--color-surface-overlay: rgba(43, 41, 36, 0.6);

	/* ─── Skeleton ─── */
	--color-skeleton-default: var(--slate-3);

	/* ─── Avatar Fallback Colors ─── */
	--avatar-0-bg: #FEF3CD;
	--avatar-0-text: #6B5142;
	--avatar-1-bg: #FBEAE4;
	--avatar-1-text: #B86358;
	--avatar-2-bg: #e5f0f7;
	--avatar-2-text: #2a577a;
	--avatar-3-bg: #E8F3E2;
	--avatar-3-text: #576B40;
	--avatar-4-bg: #fef4c7;
	--avatar-4-text: #8c610b;
	--avatar-5-bg: #fbeae8;
	--avatar-5-text: #963c37;
	--avatar-6-bg: #F5EDE4;
	--avatar-6-text: #4A382D;
	--avatar-7-bg: #FDECB0;
	--avatar-7-text: #6B5142;

	/* ─── People in the calendar: who made an entry – the edge tells, the fill keeps text readable.
	   Never bee yellow: that is today and the chosen day ─── */
	--person-0-fill: #DDEAF5;
	--person-0-edge: #3672A8;
	--person-1-fill: #F7DED8;
	--person-1-edge: #C2503F;
	--person-2-fill: #DCEDD6;
	--person-2-edge: #4A8A3F;
	--person-3-fill: #E7DFF3;
	--person-3-edge: #7B58B0;
	--person-4-fill: #FAE2CB;
	--person-4-edge: #C66A1E;
	--person-5-fill: #D4ECE8;
	--person-5-edge: #2A8579;
	--person-6-fill: #F6DCE9;
	--person-6-edge: #B44A82;
	--person-7-fill: #E4E1DA;
	--person-7-edge: #6F6658;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC COLOR TOKENS - DARK MODE
   Same 3-Layer System with inverted primitives
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
	/* tell the browser which scheme we render – native controls/scrollbars match and
	   browser "auto dark" modes stop recolouring our artwork (e.g. the lottie bee) */
	color-scheme: dark;
	/* Dark Mode Primitives – Sand Dark */
	--slate-1: #1C1815;
	--slate-2: #252019;
	--slate-3: #302921;
	--slate-4: #3A3229;
	--slate-5: #453B31;
	--slate-6: #52463A;
	--slate-7: #665644;
	--slate-8: #7A6B56;
	--slate-9: #9A8568;
	--slate-10: #B8A080;
	--slate-11: #D4C4A8;
	--slate-12: #F5EAD6;

	/* Bee Yellow Dark (Primary Brand) */
	--violet-1: #1A1608;
	--violet-2: #22200C;
	--violet-3: #302B12;
	--violet-4: #3E3718;
	--violet-5: #4D441E;
	--violet-6: #5E5326;
	--violet-7: #726430;
	--violet-8: #8A783C;
	--violet-9: #F6C644;
	--violet-10: #F8D46A;
	--violet-11: #B8A080;
	--violet-12: #FAF3DC;

	/* Red Dark */
	--red-1: #1a1312;
	--red-2: #231817;
	--red-3: #33211f;
	--red-4: #422928;
	--red-5: #513231;
	--red-6: #633d3b;
	--red-7: #7a4d4a;
	--red-8: #996560;
	--red-9: #c45650;
	--red-10: #d97068;
	--red-11: #eb9590;
	--red-12: #fce6e4;

	/* Leaf Green Dark */
	--green-1: #121510;
	--green-2: #181D15;
	--green-3: #1F2819;
	--green-4: #27331F;
	--green-5: #2F3F26;
	--green-6: #3A4C2E;
	--green-7: #495E3A;
	--green-8: #5C744A;
	--green-9: #78915A;
	--green-10: #8AA56C;
	--green-11: #A0BA82;
	--green-12: #E8F3E2;

	/* Amber Dark */
	--amber-1: #15130c;
	--amber-2: #1c180f;
	--amber-3: #292211;
	--amber-4: #362b15;
	--amber-5: #433518;
	--amber-6: #52421d;
	--amber-7: #685425;
	--amber-8: #8a7032;
	--amber-9: #c58a12;
	--amber-10: #dea02a;
	--amber-11: #f4bb52;
	--amber-12: #fef3d4;

	/* ─── Background (3-Layer System) ─── */
	--color-bg-canvas: var(--slate-1);
	--color-bg-surface: var(--slate-2);
	--color-bg-component: var(--slate-3);
	--color-bg-component-hover: var(--slate-4);
	--color-bg-component-active: var(--slate-5);

	/* Legacy */
	--color-bg-primary: var(--color-bg-canvas);
	--color-bg-input: var(--slate-2);
	--color-bg-disabled: var(--slate-4);

	/* Brand */
	--color-bg-brand-default: var(--violet-9);
	--color-bg-brand-hover: var(--violet-10);
	--color-bg-brand-active: var(--violet-11);
	--color-bg-brand-subtle: var(--violet-3);

	/* Error */
	--color-bg-error-default: var(--red-9);
	--color-bg-error-hover: var(--red-10);
	--color-bg-error-active: var(--red-11);
	--color-bg-error-subtle: var(--red-3);

	/* ─── Text ─── */
	--color-text-primary: var(--slate-12);
	--color-text-secondary: var(--slate-11);
	--color-text-tertiary: var(--slate-9);
	--color-text-disabled: var(--slate-8);
	--color-text-inverse: var(--slate-1);
	--color-text-brand: var(--violet-11);
	--color-text-error: var(--red-11);
	--color-text-success: var(--green-11);
	--color-text-warning: var(--amber-11);

	/* ─── Border ─── */
	--color-border-default: var(--slate-6);
	--color-border-subtle: var(--slate-4);
	--color-border-input: var(--slate-9);
	--color-border-ink: var(--slate-9);
	--color-border-focus: var(--violet-8);
	--color-border-disabled: var(--slate-5);
	--color-border-error: var(--red-7);
	--color-border-success: var(--green-7);

	/* ─── Surface ─── */
	--color-surface-raised: var(--slate-2);
	--color-surface-sunken: var(--slate-1);
	--color-surface-overlay: rgba(0, 0, 0, 0.7);

	/* ─── Skeleton ─── */
	--color-skeleton-default: var(--slate-4);

	/* ─── Avatar Fallback Colors ─── */
	--avatar-0-bg: #302B12;
	--avatar-0-text: #B8A080;
	--avatar-1-bg: #30231E;
	--avatar-1-text: #F4B8AA;
	--avatar-2-bg: #1a242e;
	--avatar-2-text: #7cb0d6;
	--avatar-3-bg: #1F2819;
	--avatar-3-text: #A0BA82;
	--avatar-4-bg: #292211;
	--avatar-4-text: #f4bb52;
	--avatar-5-bg: #33211f;
	--avatar-5-text: #eb9590;
	--avatar-6-bg: #2E2520;
	--avatar-6-text: #B8A090;
	--avatar-7-bg: #3E3718;
	--avatar-7-text: #F8D46A;

	/* ─── People in the calendar ─── */
	--person-0-fill: #22374A;
	--person-0-edge: #84B6E2;
	--person-1-fill: #4A2A24;
	--person-1-edge: #EE9585;
	--person-2-fill: #263D25;
	--person-2-edge: #93C987;
	--person-3-fill: #372C4A;
	--person-3-edge: #BBA2E6;
	--person-4-fill: #4B3320;
	--person-4-edge: #F0AA6A;
	--person-5-fill: #1F3D39;
	--person-5-edge: #7CCDC1;
	--person-6-fill: #4A2739;
	--person-6-edge: #EA97C3;
	--person-7-fill: #36322C;
	--person-7-edge: #BDB3A3;

	/* ─── Shadows (warmer in dark mode too) ─── */
	--color-shadow-ink: #0B0907;
	--pillow-surface: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Cpath%20d%3D'M24%2C10%20Q60%2C7.5%2096%2C10%20Q110%2C10%20110%2C24%20Q112.5%2C60%20110%2C96%20Q110%2C110%2096%2C110%20Q60%2C112.5%2024%2C110%20Q10%2C110%2010%2C96%20Q7.5%2C60%2010%2C24%20Q10%2C10%2024%2C10%20Z'%20fill%3D'%230B0907'%20transform%3D'translate(2%202)'%2F%3E%3Cpath%20d%3D'M24%2C10%20Q60%2C7.5%2096%2C10%20Q110%2C10%20110%2C24%20Q112.5%2C60%20110%2C96%20Q110%2C110%2096%2C110%20Q60%2C112.5%2024%2C110%20Q10%2C110%2010%2C96%20Q7.5%2C60%2010%2C24%20Q10%2C10%2024%2C10%20Z'%20fill%3D'%23252019'%20stroke%3D'%239A8568'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEM PREFERENCE: Auto Dark Mode
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	[data-theme="system"] {
		/* tell the browser which scheme we render – native controls/scrollbars match and
		   browser "auto dark" modes stop recolouring our artwork (e.g. the lottie bee) */
		color-scheme: dark;
		/* Dark Mode Primitives – Sand Dark */
		--slate-1: #1C1815;
		--slate-2: #252019;
		--slate-3: #302921;
		--slate-4: #3A3229;
		--slate-5: #453B31;
		--slate-6: #52463A;
		--slate-7: #665644;
		--slate-8: #7A6B56;
		--slate-9: #9A8568;
		--slate-10: #B8A080;
		--slate-11: #D4C4A8;
		--slate-12: #F5EAD6;

		/* Bee Yellow Dark (Primary Brand) */
		--violet-1: #1A1608;
		--violet-2: #22200C;
		--violet-3: #302B12;
		--violet-4: #3E3718;
		--violet-5: #4D441E;
		--violet-6: #5E5326;
		--violet-7: #726430;
		--violet-8: #8A783C;
		--violet-9: #F6C644;
		--violet-10: #F8D46A;
		--violet-11: #B8A080;
		--violet-12: #FAF3DC;

		--red-1: #1a1312;
		--red-2: #231817;
		--red-3: #33211f;
		--red-4: #422928;
		--red-5: #513231;
		--red-6: #633d3b;
		--red-7: #7a4d4a;
		--red-8: #996560;
		--red-9: #c45650;
		--red-10: #d97068;
		--red-11: #eb9590;
		--red-12: #fce6e4;

		/* Leaf Green Dark */
		--green-1: #121510;
		--green-2: #181D15;
		--green-3: #1F2819;
		--green-4: #27331F;
		--green-5: #2F3F26;
		--green-6: #3A4C2E;
		--green-7: #495E3A;
		--green-8: #5C744A;
		--green-9: #78915A;
		--green-10: #8AA56C;
		--green-11: #A0BA82;
		--green-12: #E8F3E2;

		--amber-1: #15130c;
		--amber-2: #1c180f;
		--amber-3: #292211;
		--amber-4: #362b15;
		--amber-5: #433518;
		--amber-6: #52421d;
		--amber-7: #685425;
		--amber-8: #8a7032;
		--amber-9: #c58a12;
		--amber-10: #dea02a;
		--amber-11: #f4bb52;
		--amber-12: #fef3d4;

		/* ─── Background ─── */
		--color-bg-canvas: var(--slate-1);
		--color-bg-surface: var(--slate-2);
		--color-bg-component: var(--slate-3);
		--color-bg-component-hover: var(--slate-4);
		--color-bg-component-active: var(--slate-5);
		--color-bg-primary: var(--color-bg-canvas);
		--color-bg-input: var(--slate-2);
		--color-bg-disabled: var(--slate-4);
		--color-bg-brand-default: var(--violet-9);
		--color-bg-brand-hover: var(--violet-10);
		--color-bg-brand-active: var(--violet-11);
		--color-bg-brand-subtle: var(--violet-3);
		--color-bg-error-default: var(--red-9);
		--color-bg-error-hover: var(--red-10);
		--color-bg-error-active: var(--red-11);
		--color-bg-error-subtle: var(--red-3);

		/* ─── Text ─── */
		--color-text-primary: var(--slate-12);
		--color-text-secondary: var(--slate-11);
		--color-text-tertiary: var(--slate-9);
		--color-text-disabled: var(--slate-8);
		--color-text-inverse: var(--slate-1);
		--color-text-brand: var(--violet-11);
		--color-text-error: var(--red-11);
		--color-text-success: var(--green-11);
		--color-text-warning: var(--amber-11);

		/* ─── Border ─── */
		--color-border-default: var(--slate-6);
		--color-border-subtle: var(--slate-4);
		--color-border-input: var(--slate-9);
		--color-border-ink: var(--slate-9);
		--color-border-focus: var(--violet-8);
		--color-border-disabled: var(--slate-5);
		--color-border-error: var(--red-7);
		--color-border-success: var(--green-7);

		/* ─── Surface ─── */
		--color-surface-raised: var(--slate-2);
		--color-surface-sunken: var(--slate-1);
		--color-surface-overlay: rgba(0, 0, 0, 0.7);

		/* ─── Skeleton ─── */
		--color-skeleton-default: var(--slate-4);

		/* ─── Avatar Fallback Colors ─── */
		--avatar-0-bg: #302B12;
		--avatar-0-text: #B8A080;
		--avatar-1-bg: #30231E;
		--avatar-1-text: #F4B8AA;
		--avatar-2-bg: #1a242e;
		--avatar-2-text: #7cb0d6;
		--avatar-3-bg: #1F2819;
		--avatar-3-text: #A0BA82;
		--avatar-4-bg: #292211;
		--avatar-4-text: #f4bb52;
		--avatar-5-bg: #33211f;
		--avatar-5-text: #eb9590;
		--avatar-6-bg: #2E2520;
		--avatar-6-text: #B8A090;
		--avatar-7-bg: #3E3718;
		--avatar-7-text: #F8D46A;

		/* ─── People in the calendar ─── */
		--person-0-fill: #22374A;
		--person-0-edge: #84B6E2;
		--person-1-fill: #4A2A24;
		--person-1-edge: #EE9585;
		--person-2-fill: #263D25;
		--person-2-edge: #93C987;
		--person-3-fill: #372C4A;
		--person-3-edge: #BBA2E6;
		--person-4-fill: #4B3320;
		--person-4-edge: #F0AA6A;
		--person-5-fill: #1F3D39;
		--person-5-edge: #7CCDC1;
		--person-6-fill: #4A2739;
		--person-6-edge: #EA97C3;
		--person-7-fill: #36322C;
		--person-7-edge: #BDB3A3;

		/* ─── Shadows ─── */
		--color-shadow-ink: #0B0907;
		--pillow-surface: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'120'%20height%3D'120'%20viewBox%3D'0%200%20120%20120'%3E%3Cpath%20d%3D'M24%2C10%20Q60%2C7.5%2096%2C10%20Q110%2C10%20110%2C24%20Q112.5%2C60%20110%2C96%20Q110%2C110%2096%2C110%20Q60%2C112.5%2024%2C110%20Q10%2C110%2010%2C96%20Q7.5%2C60%2010%2C24%20Q10%2C10%2024%2C10%20Z'%20fill%3D'%230B0907'%20transform%3D'translate(2%202)'%2F%3E%3Cpath%20d%3D'M24%2C10%20Q60%2C7.5%2096%2C10%20Q110%2C10%20110%2C24%20Q112.5%2C60%20110%2C96%20Q110%2C110%2096%2C110%20Q60%2C112.5%2024%2C110%20Q10%2C110%2010%2C96%20Q7.5%2C60%2010%2C24%20Q10%2C10%2024%2C10%20Z'%20fill%3D'%23252019'%20stroke%3D'%239A8568'%20stroke-width%3D'1.5'%2F%3E%3C%2Fsvg%3E");
	}
}