/* ============================================================
   Carm Ecommerce — Design System v3
   Tipografia: Playfair Display (display) + Manrope (body)
   Inspirado em Mirante (UX) + posicionamento Carm (premium)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Cores */
    --color-bg:           #FFFFFF;
    --color-surface:      #FFFFFF;
    --color-soft:         #F8F6F3;       /* warm off-white */
    --color-cream:        #FBF6EF;
    --color-line:         #ECE6DC;
    --color-line-strong:  #D9CFC0;
    --color-ink:          #1A1714;
    --color-ink-soft:     #3D3933;
    --color-muted:        #847B72;
    --color-promo:        #C84B4B;       /* coral elegante */
    --color-promo-dark:   #A33838;
    --color-success:      #4F7F65;       /* sage premium */
    --color-info:         #1E66BD;
    --color-warning:      #C99844;
    --color-cta:          #1A1714;
    --color-cta-hover:    #C84B4B;
    --color-accent:       #B8945A;       /* dourado quente */

    /* Tipografia */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Spacing */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 48px;
    --s-9: 64px;
    --s-10: 96px;
    --s-11: 128px;

    /* Radius */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(26, 23, 20, 0.04);
    --sh-sm: 0 2px 8px rgba(26, 23, 20, 0.06);
    --sh-md: 0 8px 24px rgba(26, 23, 20, 0.10);
    --sh-lg: 0 16px 48px rgba(26, 23, 20, 0.14);

    /* Transitions */
    --t-fast: 150ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
    --t-slow: 480ms cubic-bezier(.25, .8, .25, 1);

    /* Layout */
    --container-max: 1320px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }

button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    margin: 0;
    color: var(--color-ink);
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 400; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 600; font-family: var(--font-sans); }
p { margin: 0; }
em { font-style: italic; }

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

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

/* ---------- Utilitarios ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

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

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0 0 var(--s-3);
    font-family: var(--font-sans);
}
.eyebrow--muted { color: var(--color-muted); }

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

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page__main { flex: 1 0 auto; }

.error-page { padding-block: var(--s-10); text-align: center; }
.error-page p { color: var(--color-muted); margin-bottom: var(--s-4); }

/* Centered helper */
.center-text { text-align: center; }