/* ============================================================
   LOOPED JOYS — Design System
   main.css: Reset · Tokens · Typography · Base
   ============================================================ */

/* ── 1. CSS Custom Properties (Design Tokens) ──────────────── */
:root {
    /* ── Primary: Blush Pink ─────────────────────────────────── */
    --clr-blush: #D97B82;
    --clr-blush-light: #E8A5A9;
    --clr-blush-pale: #FDF0F1;
    --clr-blush-dark: #C46870;

    /* ── Secondary: Sage Green ───────────────────────────────── */
    --clr-sage: #8FB288;
    --clr-sage-light: #B5C9B2;
    --clr-sage-dark: #6B8F68;

    /* ── Surfaces & Backgrounds ──────────────────────────────── */
    --clr-bg: #FAFAFA;
    --clr-surface: #FFFFFF;
    --clr-cream: #FAFAFA;
    --clr-cream-dark: #F5F5F5;

    /* ── Borders ─────────────────────────────────────────────── */
    --clr-beige: #F3F4F6;
    --clr-beige-dark: #E5E7EB;

    /* ── Caramel / Brown (headings & brand accents) ───────────── */
    --clr-brown: #8C5E4A;
    --clr-brown-dark: #6F4723;
    --clr-brown-light: #B07D69;

    /* ── Semantic ────────────────────────────────────────────── */
    --clr-text: #1A1A1A;
    --clr-text-muted: #6B7280;

    --clr-primary: #D97B82;
    --clr-primary-h: #C46870;

    --clr-accent: var(--clr-sage);

    --clr-border: #F3F4F6;
    --clr-border-dark: #E5E7EB;

    /* Feedback */
    --clr-success: #8FB288;
    --clr-error: #E07070;
    --clr-warning: #E8A44A;

    /* ── Typography ─────────────────────────────────────────── */
    --font-display: 'Poppins', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Font Sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --fs-5xl: 3.75rem;
    --fs-6xl: 4.5rem;

    /* Line Heights */
    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.6;
    --lh-loose: 1.85;

    /* Letter Spacing */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.05em;
    --ls-wider: 0.1em;
    --ls-widest: 0.2em;

    /* Spacing Scale */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-14: 3.5rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Border Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-2xl: 32px;
    --r-full: 9999px;

    /* Shadows — clean neutral */
    --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sh-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    --sh-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --sh-lg: 0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
    --sh-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
    --sh-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(229, 231, 235, 0.8);

    /* Transitions */
    --tr-fast: 150ms ease;
    --tr-base: 250ms ease;
    --tr-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --tr-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container: 1440px;
    --container-wide: 1440px;
    --container-sm: 768px;
    --gutter: clamp(1rem, 4vw, 2rem);

    /* Header */
    --header-h: 72px;
    --announce-h: 40px;

    /* Z-index */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}



/* ── 2. Modern CSS Reset ───────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

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

button {
    cursor: pointer;
    background: none;
    border: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--clr-text);
}

p {
    line-height: var(--lh-normal);
}

input,
textarea,
select {
    outline: none;
}

/* ── 3. Typography Scale ───────────────────────────────────── */
.display-1 {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-4xl), 7vw, var(--fs-6xl));
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.display-2 {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
    font-weight: 600;
    line-height: var(--lh-tight);
}

h1,
.h1 {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
    font-weight: 700;
}

h2,
.h2 {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
    font-weight: 600;
}

h3,
.h3 {
    font-family: var(--font-display);
    font-size: clamp(var(--fs-lg), 2.5vw, var(--fs-2xl));
    font-weight: 600;
}

h4,
.h4 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
}

h5,
.h5 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 500;
}

h6,
.h6 {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

.text-overline {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.text-caption {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--clr-text-muted);
}

.text-body-lg {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

/* ── 4. Utility: Color ─────────────────────────────────────── */
.text-blush {
    color: var(--clr-blush);
}

.text-brown {
    color: var(--clr-brown);
}

.text-sage {
    color: var(--clr-sage-dark);
}

.text-muted {
    color: var(--clr-text-muted);
}

.text-white {
    color: #ffffff;
}

.bg-cream {
    background-color: var(--clr-cream);
}

.bg-blush {
    background-color: var(--clr-blush-pale);
}

.bg-beige {
    background-color: var(--clr-beige);
}

.bg-sage {
    background-color: var(--clr-sage-light);
}

.bg-white {
    background-color: #ffffff;
}

/* ── 5. Utility: Spacing ───────────────────────────────────── */
.section-pad {
    padding-block: clamp(var(--sp-12), 8vw, var(--sp-24));
}

.section-pad-sm {
    padding-block: clamp(var(--sp-8), 5vw, var(--sp-16));
}

/* ── 6. Screen-reader only ─────────────────────────────────── */
.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;
}

/* ── 7. Focus styles (accessible) ─────────────────────────── */
:focus-visible {
    outline: 2px solid var(--clr-blush);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* ── 8. Selection ──────────────────────────────────────────── */
::selection {
    background-color: var(--clr-blush-pale);
    color: var(--clr-text);
}

/* ── 9. Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--clr-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--clr-beige-dark);
    border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-blush-light);
}

/* ── 10. Body states ───────────────────────────────────────── */
body.modal-open,
body.menu-open {
    overflow: hidden;
}