:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Playfair Display', ui-serif, Georgia, serif;
}

body {
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.font-playfair-display,
.font-display-lg,
.font-headline-lg,
.font-headline-lg-mobile,
.font-headline-md {
    font-family: var(--font-display);
}

.font-body-sm,
.font-body-md,
.font-body-lg,
.font-label-bold,
.font-measurement-data {
    font-family: var(--font-sans);
}

.text-label-bold {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.text-body-sm {
    font-size: 14px;
    line-height: 1.5;
}

.text-body-md {
    font-size: 16px;
    line-height: 1.6;
}

.text-body-lg {
    font-size: 18px;
    line-height: 1.6;
}

.text-headline-md {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
}

.text-headline-lg-mobile {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
}

.text-headline-lg {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 600;
}

.text-measurement-data {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.01em;
    font-weight: 500;
}

.text-\[32px\] {
    font-size: 32px;
}

.text-9xl {
    font-size: 128px;
    line-height: 1;
}

.max-w-container-max { max-width: 1280px; }
.px-gutter { padding-left: 16px; padding-right: 16px; }
.right-gutter { right: 16px; }
.px-base { padding-left: 8px; padding-right: 8px; }
.p-sm { padding: 12px; }
.p-md { padding: 24px; }
.pt-sm { padding-top: 12px; }
.pt-md { padding-top: 24px; }
.pb-xs { padding-bottom: 4px; }
.pb-safe { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.py-md { padding-top: 24px; padding-bottom: 24px; }
.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 12px; }
.mb-sm { margin-bottom: 12px; }
.mb-md { margin-bottom: 24px; }
.mx-md { margin-left: 24px; margin-right: 24px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }

.space-y-xs > :not([hidden]) ~ :not([hidden]) { margin-top: 4px; }
.space-y-sm > :not([hidden]) ~ :not([hidden]) { margin-top: 12px; }
.space-y-md > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; }
.space-y-lg > :not([hidden]) ~ :not([hidden]) { margin-top: 40px; }

.rounded {
    border-radius: 0.125rem;
}

.rounded-lg {
    border-radius: 0.25rem;
}

.rounded-xl {
    border-radius: 0.5rem;
}

.rounded-t-xl {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.rounded-full {
    border-radius: 0.75rem;
}

/* Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hide scrollbars (both class names supported) */
.no-scrollbar::-webkit-scrollbar,
.scroll-hide::-webkit-scrollbar { display: none; }
.no-scrollbar,
.scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }

.measurement-row:last-child { border-bottom: none; }

.input-focus-gold:focus {
    outline: none;
    border-color: #775a19;
    box-shadow: 0 0 0 2px rgba(119, 90, 25, 0.1);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sidebar-link.active {
    background-color: #fed488;
    color: #785a1a;
}

.sidebar-link.active .material-symbols-outlined {
    color: #785a1a;
}