/*
 * PURPOSE: Global HTML baseline styles for MySabun Starter Pack
 * RESPONSIBILITY: Box-sizing, basic typography, accessibility baseline.
 * WHAT MUST NOT BE PUT HERE: Layout classes or component-specific styling.
 */

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

html, body {
margin: 0;
padding: 0;
min-height: 100vh;
}

body {
font-family: var(--font-body);
font-size: var(--font-size-base); /* 1rem = 16px */
font-weight: var(--font-weight-regular);
line-height: var(--line-height-base);
color: var(--color-text-main);
background-color: var(--color-bg-base);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-primary);
line-height: var(--line-height-tight);
margin-top: 0;
margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }

p {
margin-top: 0;
margin-bottom: var(--space-md);
}

a {
color: var(--color-action);
text-decoration: none;
transition: color 0.2s ease;
}

a:hover {
text-decoration: underline;
}

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

button, input, select, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
margin: 0;
}

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

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

.app-loading,
.app-noscript {
padding: var(--space-xl);
text-align: center;
color: var(--color-text-muted);
font-weight: var(--font-weight-medium);
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}