@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/primeicons@7.0.0/primeicons.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-thin-rounded/css/uicons-thin-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-thin-straight/css/uicons-thin-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-bold-straight/css/uicons-bold-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-straight/css/uicons-regular-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-bold-rounded/css/uicons-bold-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-brands/css/uicons-brands.css');

:root {
	--color-primary: #644aff;
	--color-primary-accent: #638df5;
	--color-primary-gradient: linear-gradient(135deg, #644aff, #638df5);
	--color-primary-gradient-soft: linear-gradient(135deg, rgba(103, 99, 200, 0.12), rgba(99, 141, 245, 0.12));
	--color-primary-shadow: rgba(99, 141, 245, 0.3);
	--surface-color: #f8fafc;
	--font-color-dark: #0a0a0b;
	--font-color-light: #64748b;
	--font-color-faint: rgba(0, 0, 0, 0.09);
	--button-color-red: #d74c6c;
	--button-color-primary: #0a0a0b;
	--button-color-green: #22c75f;
	--notification-unseen-color: #ef4444;
	--shadow-color: rgba(0, 0, 0, 0.07);
	--accent-recurring: #e67c45;
	--accent-recurring-soft: rgba(230, 124, 69, 0.18);
	--status-due-bg: rgba(100, 74, 255, 0.15);
	--status-paid-bg: rgba(49, 234, 117, 0.18);
	--status-info-bg: rgba(15, 23, 42, 0.1);
	--neutral-soft-bg: rgba(15, 23, 42, 0.08);
	--accent-timeblock: #1853c6;
	--accent-timeblock-soft: rgba(38, 132, 255, 0.18);
	--danger-soft-bg: rgba(215, 76, 108, 0.08);
	--danger-strong-bg: rgba(215, 76, 108, 0.16);
	--border-color-faint: rgba(0, 0, 0, 0.09);
	--border-color-strong: #363636;
	--avatar-bg-neutral: #e5e7eb;
	--avatar-text-neutral: #1f2937;
	--card-border-width: 1px;
	--card-border-color: var(--border-color-faint);
	--card-border-radius: var(--border-radius, 12px);
	--card-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	--card-shadow-hover: 0 8px 20px rgba(15, 23, 42, 0.12);
	--radius: 14px;
	--radius-sm: 8px;
	--radius-full: 100%;
	--select-border-radius: var(--border-radius);
	--select-padding-block: 0.75rem;
	--select-padding-inline: 1rem;
	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-size-xxs: 0.66rem;
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 3rem;
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extra-bold: 900;
	--line-height-tight: 1.2;
	--line-height-snug: 1.3;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.7;
	--page-padding: 20px;
	--top-bar-height: 60px;
	--border-radius: 8px;
	--drawer-shadow: 0 20px 60px -20px rgba(17, 24, 39, 0.35);
}

@media (max-width: 900px) {
	:root {
		--page-padding: 20px 10px;
	}
}

html {
	font-family: var(--font-family);
	font-size: var(--font-size-md);
	font-weight: var(--font-normal);
	line-height: var(--line-height-normal);
	scroll-behavior: smooth;
	height: -webkit-fill-available;
	overscroll-behavior: none;
	color: var(--font-color-dark);
}

body {
	padding: 0 !important;
	margin: 0 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: white;
	overflow-x: hidden;
	min-height: 100dvh;
	min-height: -webkit-fill-available;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	overscroll-behavior-y: contain;
}

*:focus {
	outline: 0 !important;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

iframe {
	border: 0;
}

a {
	text-decoration: none;
	outline: none;
	padding: 0;
	margin: 0;
}

select,
input,
textarea,
button {
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
}

p {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

select,
button {
	cursor: pointer;
}

h1 {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-bold);
	line-height: var(--line-height-tight);
}

h2 {
	font-size: var(--font-size-3xl);
	font-weight: var(--font-semibold);
	line-height: var(--line-height-snug);
}

h3 {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-semibold);
	line-height: var(--line-height-snug);
}

h4 {
	font-size: var(--font-size-xl);
	font-weight: var(--font-medium);
}

h5 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-medium);
}

h6 {
	font-size: var(--font-size-md);
	font-weight: var(--font-medium);
}

p,
li {
	font-size: var(--font-size-md);
	font-weight: var(--font-normal);
	line-height: var(--line-height-normal);
}