/* ============================================================
   TYPE.CSS — Fonts, Typography & Text Styles
   Pure Living Upgrades
============================================================ */

/* Google Fonts via @import (also loaded via <link> in HTML head) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Work+Sans:wght@400;500;600;700;800&display=swap');

/* Local fallback font family tokens — referenced by styles.css */
:root {
    --serif: "Playfair Display", "Cormorant Garamond", serif;
    --sans: "Work Sans", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Body typography */
body {
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Headings */
h1,
h2,
h3,
h4,
.font-serif {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h5,
h6 {
    font-family: var(--sans);
    font-weight: 700;
}

/* Eyebrow label */
.eyebrow {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--wine);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.eyebrow::before,
.eyebrow::after {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--gold);
}

/* Selection color */
::selection {
    background: var(--wine);
    color: #fff;
}

/* Scrollbar (typography-adjacent visual element) */
::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: var(--ivory);
}

::-webkit-scrollbar-thumb {
    background: var(--wine);
    border-radius: 10px;
}

/* Paragraph defaults */
p {
    font-family: var(--sans);
}

/* Brand text */
.brand-center {
    font-family: var(--serif);
    font-weight: 700;
}

/* Modal title */
.modal-title {
    font-family: var(--serif);
    font-weight: 700;
}

/* Policy heading */
.policy-heading3 {
    font-family: var(--serif);
    font-weight: 700;
    color: var(--wine);
    margin-top: 1.1rem;
}