/* ==========================================================================
   FLEECY — DESIGN SYSTEM
   ========================================================================== */

/* Import de fontes — Archivo (headings) + Inter (corpo) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    /* ---- Cores ---- */
    --color-bg:          #ffffff;
    --color-bg-alt:      #f5f5f5;
    --color-fg:           #111111;
    --color-fg-muted:    #6b6b6b;
    --color-border:      #e5e5e5;
    --color-inverse-bg:  #111111;
    --color-inverse-fg:  #ffffff;

    /* ---- Tipografia ---- */
    --font-heading: 'Archivo', sans-serif;
    --font-body:    'Inter', sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.5rem;
    --fs-3xl:  3.5rem;

    /* ---- Espaçamento (escala consistente) ---- */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  48px;
    --space-xl:  80px;
    --space-2xl: 120px;

    /* ---- Motion ---- */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.4s;
    --duration-slow: 0.8s;

    /* ---- Diversos ---- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --max-width: 1280px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

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

body {
    font-family: var(--font-body);
    color: var(--color-fg);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-fg);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 var(--space-sm);
}

h1 { font-size: var(--fs-3xl); font-weight: 800; }
h2 { font-size: var(--fs-2xl); font-weight: 700; }
h3 { font-size: var(--fs-xl);  font-weight: 700; }

p {
    margin: 0 0 var(--space-sm);
    color: var(--color-fg-muted);
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container padrão pra manter consistência de largura entre seções */
.fleecy-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Botões — padrão minimalista, borda fina, sem sombra */
.fleecy-btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--color-fg);
    background: transparent;
    color: var(--color-fg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-default);
}

.fleecy-btn:hover {
    background: var(--color-fg);
    color: var(--color-bg);
}