/*
========================================
ZHARFA BASE STYLES
Version: 1.0.0
Purpose:
- Base HTML Elements
- Accessibility
- Browser consistency
========================================
*/

/* ==========================
   GLOBAL
========================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg-page);
	color: var(--text-primary);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================
   LINKS
========================== */

a {
	color: var(--link);
	text-decoration: none;
	transition:
		color var(--transition-fast),
		opacity var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--link-hover);
}

/* ==========================
   MEDIA
========================== */

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================
   FORM ELEMENTS
========================== */

button,
input,
select,
textarea {
	font: inherit;
}

textarea {
	resize: vertical;
}

/* ==========================
   ACCESSIBILITY
========================== */

:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ==========================
   TEXT SELECTION
========================== */

::selection {
	background: var(--selection-background);
	color: var(--selection-text);
}
/* ==========================================
   CUSTOM SCROLLBAR
========================================== */

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--brand-primary) var(--bg-soft);
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-soft);
	border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb {
	background: var(--brand-primary);
	border-radius: var(--radius-pill);
	border: 2px solid var(--bg-soft);
	transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--brand-secondary);
}

::-webkit-scrollbar-corner {
	background: var(--bg-soft);
}