/**
 * VYRO Global Base Stylesheet
 *
 * CSS Reset, Google Fonts loading, body defaults, global typography scale,
 * links, selection, scrollbar, and accessibility utilities.
 *
 * @package Vyro
 * @since   1.0.0 (Design Overhaul)
 */

/* ==========================================================================
   1. GOOGLE FONTS — Inter (Self-hosted friendly fallback chain)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

/* ==========================================================================
   2. MODERN CSS RESET
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	hanging-punctuation: first last;
}

body {
	font-family: var(--vyro-font-body);
	font-size: var(--vyro-text-base);
	font-weight: var(--vyro-font-normal);
	line-height: var(--vyro-leading-normal);
	color: var(--vyro-color-text);
	background-color: var(--vyro-color-background);
	min-height: 100vh;
	overflow-x: hidden;
}

/* Scroll Lock utility */
html.vyro-scroll-locked,
body.is-scroll-locked {
	overflow: hidden;
	overscroll-behavior: none;
}

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

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

p,
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* ==========================================================================
   3. GLOBAL TYPOGRAPHY SYSTEM
   ========================================================================== */

/* --- Display Scale --- */
.vyro-type-display-2xl {
	font-family: var(--vyro-font-display);
	font-size: var(--vyro-text-display-2xl);
	font-weight: var(--vyro-font-black);
	line-height: var(--vyro-leading-tight);
	letter-spacing: var(--vyro-tracking-tightest);
}

.vyro-type-display-xl {
	font-family: var(--vyro-font-display);
	font-size: var(--vyro-text-display-xl);
	font-weight: var(--vyro-font-extrabold);
	line-height: var(--vyro-leading-tight);
	letter-spacing: var(--vyro-tracking-tight);
}

.vyro-type-display-lg {
	font-family: var(--vyro-font-display);
	font-size: var(--vyro-text-display-lg);
	font-weight: var(--vyro-font-bold);
	line-height: var(--vyro-leading-snug);
	letter-spacing: var(--vyro-tracking-snug);
}

.vyro-type-display-md {
	font-family: var(--vyro-font-display);
	font-size: var(--vyro-text-display-md);
	font-weight: var(--vyro-font-bold);
	line-height: var(--vyro-leading-snug);
	letter-spacing: var(--vyro-tracking-snug);
}

.vyro-type-display-sm {
	font-family: var(--vyro-font-display);
	font-size: var(--vyro-text-display-sm);
	font-weight: var(--vyro-font-bold);
	line-height: var(--vyro-leading-snug);
	letter-spacing: var(--vyro-tracking-snug);
}

/* --- Heading Scale --- */
h1, .vyro-type-h1 {
	font-family: var(--vyro-font-display);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: var(--vyro-font-bold);
	line-height: var(--vyro-leading-snug);
	letter-spacing: var(--vyro-tracking-tight);
	color: var(--vyro-color-text);
}

h2, .vyro-type-h2 {
	font-family: var(--vyro-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: var(--vyro-font-bold);
	line-height: var(--vyro-leading-snug);
	letter-spacing: var(--vyro-tracking-snug);
	color: var(--vyro-color-text);
}

h3, .vyro-type-h3 {
	font-family: var(--vyro-font-display);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: var(--vyro-font-semibold);
	line-height: var(--vyro-leading-snug);
	letter-spacing: -0.01em;
	color: var(--vyro-color-text);
}

h4, .vyro-type-h4 {
	font-size: 1.125rem;
	font-weight: var(--vyro-font-semibold);
	line-height: var(--vyro-leading-snug);
	color: var(--vyro-color-text);
}

h5, .vyro-type-h5 {
	font-size: 1rem;
	font-weight: var(--vyro-font-semibold);
	line-height: var(--vyro-leading-normal);
	color: var(--vyro-color-text);
}

h6, .vyro-type-h6 {
	font-size: 0.9375rem;
	font-weight: var(--vyro-font-semibold);
	line-height: var(--vyro-leading-normal);
	color: var(--vyro-color-text);
}

/* --- Body Scale --- */
.vyro-type-body-xl {
	font-size: var(--vyro-text-xl);
	line-height: var(--vyro-leading-relaxed);
}

.vyro-type-body-lg {
	font-size: var(--vyro-text-lg);
	line-height: var(--vyro-leading-relaxed);
}

.vyro-type-body {
	font-size: var(--vyro-text-base);
	line-height: var(--vyro-leading-normal);
}

.vyro-type-body-sm {
	font-size: var(--vyro-text-sm);
	line-height: var(--vyro-leading-normal);
}

/* --- Commerce-Specific Typography --- */
.vyro-type-price {
	font-family: var(--vyro-font-display);
	font-weight: var(--vyro-font-bold);
	line-height: var(--vyro-leading-tight);
	letter-spacing: -0.02em;
	font-feature-settings: 'tnum' 1; /* tabular numbers */
	font-variant-numeric: tabular-nums;
}

.vyro-type-price-lg  { font-size: var(--vyro-text-price-lg); }
.vyro-type-price-md  { font-size: var(--vyro-text-price-md); }
.vyro-type-price-sm  { font-size: var(--vyro-text-price-sm); }
.vyro-type-price-xs  { font-size: var(--vyro-text-price-xs); }

.vyro-type-price-original {
	color: var(--vyro-color-text-muted);
	text-decoration: line-through;
	font-weight: var(--vyro-font-normal);
}

/* --- Label / Overline --- */
.vyro-type-label {
	font-size: var(--vyro-text-2xs);
	font-weight: var(--vyro-font-semibold);
	letter-spacing: var(--vyro-tracking-widest);
	text-transform: uppercase;
	line-height: var(--vyro-leading-tight);
}

.vyro-type-caption {
	font-size: var(--vyro-text-3xs);
	line-height: var(--vyro-leading-normal);
	color: var(--vyro-color-text-muted);
}

.vyro-type-overline {
	font-size: var(--vyro-text-4xs);
	font-weight: var(--vyro-font-bold);
	letter-spacing: var(--vyro-tracking-widest);
	text-transform: uppercase;
	color: var(--vyro-color-accent);
}

/* ==========================================================================
   4. LINKS
   ========================================================================== */
a {
	color: var(--vyro-color-accent);
	text-decoration: none;
	transition: color var(--vyro-motion-fast) var(--vyro-ease-standard);
}

a:hover { color: var(--vyro-color-accent-hover); }

a:focus-visible {
	outline: 2px solid var(--vyro-color-accent);
	outline-offset: 2px;
	border-radius: var(--vyro-radius-xs);
}

/* ==========================================================================
   5. IMAGES & MEDIA
   ========================================================================== */
img {
	height: auto;
	vertical-align: middle;
}

figure { margin: 0; }

/* ==========================================================================
   6. LISTS
   ========================================================================== */
ul, ol { list-style: none; }

/* ==========================================================================
   7. SELECTION
   ========================================================================== */
::selection {
	background-color: rgba(139, 92, 246, 0.20);
	color: var(--vyro-color-text);
}

/* ==========================================================================
   8. SCROLLBAR
   ========================================================================== */
:root {
	scrollbar-width: thin;
	scrollbar-color: rgba(139, 92, 246, 0.35) transparent;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background-color: rgba(139, 92, 246, 0.35);
	border-radius: var(--vyro-radius-pill);
}

/* ==========================================================================
   9. FOCUS VISIBLE — WCAG AA
   ========================================================================== */
:focus { outline: none; }

:focus-visible {
	outline: 2px solid var(--vyro-color-border-focus);
	outline-offset: 3px;
	border-radius: var(--vyro-radius-xs);
}

/* ==========================================================================
   10. HORIZONTAL RULE
   ========================================================================== */
hr {
	border: none;
	border-top: 1px solid var(--vyro-color-border);
	margin: var(--vyro-space-32) 0;
}

/* ==========================================================================
   11. PROSE (Content Bodies)
   ========================================================================== */
.vyro-prose {
	max-width: 68ch;
	color: var(--vyro-color-text-secondary);
	line-height: var(--vyro-leading-relaxed);
}

.vyro-prose p  { margin-bottom: var(--vyro-space-16); }
.vyro-prose p:last-child { margin-bottom: 0; }

.vyro-prose h2,
.vyro-prose h3,
.vyro-prose h4 {
	margin-top: var(--vyro-space-32);
	margin-bottom: var(--vyro-space-12);
	color: var(--vyro-color-text);
}

.vyro-prose ul,
.vyro-prose ol {
	list-style: disc;
	padding-left: 1.5em;
	margin-bottom: var(--vyro-space-16);
}

.vyro-prose li { margin-bottom: var(--vyro-space-8); }

.vyro-prose strong { font-weight: var(--vyro-font-semibold); color: var(--vyro-color-text); }

.vyro-prose a {
	color: var(--vyro-color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ==========================================================================
   12. PRINT
   ========================================================================== */
@media print {
	.vyro-site-header,
	.vyro-site-footer,
	.vyro-cart-drawer,
	.vyro-wishlist-drawer,
	.vyro-mobile-tab-bar {
		display: none !important;
	}
}