/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	font-size: 16px;
	@media (width < 40rem) { font-size: 14px }

	--bg-color-light: #fcfaf7;
	--bg-color: #f9f5ef;
	--bg-color-md: #f2eee8;
	--bg-color-dark: #e5ddd0;
	--bg-color-xdark: #756a69;
	--text-color: #34040e;

	--color-gray: #f9fafb;
	--color-red: oklch(50.5% 0.213 27.518);
	--color-red-light: #f6dddd;
	--color-red-xlight: #fcf2f2;
	--color-emerald: oklch(50.8% 0.118 165.612);
	--color-emerald-light: #cee5de;
	--color-emerald-xlight: #f2f8f6;
	--color-orange: #f54900;
	--color-orange-light: #ffedd4;
	--color-orange-xlight: #fff7ed;
	--color-sky: oklch(50% 0.134 242.749);
	--color-sky-light: #d2e4ef;
	--color-sky-xlight: #f2f7fb;
	--color-pink: #e60076;
	--color-pink-light: #fce7f3;
	--color-pink-xlight: #fdf2f8;
	--color-neutral-50: #fafafa;
	--color-neutral-100: #f5f5f5;
	--color-neutral-200: oklch(92.2% 0 0);
	--color-neutral-300: oklch(87% 0 0);
	--color-neutral-500: oklch(55.6% 0 0);
	--color-neutral-600: #525252;
	--color-neutral-900: oklch(20.5% 0 0);

	--color-consultation: var(--color-orange);
	--color-consultation-light: var(--color-orange-light);
	--color-consultation-xlight: var(--color-orange-xlight);
	--color-install: var(--color-green);
	--color-install-light: var(--color-green-light);
	--color-install-xlight: var(--color-green-xlight);
	--color-pickup: var(--color-blue);
	--color-pickup-light: var(--color-blue-light);
	--color-pickup-xlight: var(--color-blue-xlight);

	--nav-width: calc(64 * var(--spacing));
	--ios-tabbar-spacing: calc(32 * var(--spacing));

	--rounded: 0.25rem;
	--rounded-md: 0.375rem;
	--rounded-lg: 0.5rem;
	--rounded-xl: calc(0.375rem + 4px);

	--box-shadow: rgba(55, 48, 48, 0.1) 0px 2px 8px;

	--spacing: 0.25rem;

	--text-base: 1rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;

	--font-weight-medium: 500;

	--radius: 0.375rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-2xl: 1rem;

	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}