/*
Theme Name: Studio Alma do Lar
Theme URI: https://samuelneves.com.br
Author: Samuel Neves
Author URI: https://samuelneves.com.br
Description: Tema WordPress + WooCommerce sob medida para o Studio Alma do Lar, loja de quadros decorativos. Funcionalidades nativas do tema (área do cliente, checkout multi-etapas, páginas institucionais) com o mínimo de plugins possível.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
WC requires at least: 6.0.0
WC tested up to: 9.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studioalmadolar
*/

/*
 * Este arquivo existe principalmente pelo cabeçalho acima — obrigatório
 * para o WordPress reconhecer a pasta como um tema instalável. O CSS de
 * fato vive em módulos separados, carregados sob demanda por página em
 * cada `inc/woocommerce/*.php` (ver ONBOARDING.md) — sem tudo num arquivo
 * só, sem CSS carregando onde não é usado.
 *
 * Reset mínimo e variáveis base do design system ficam aqui, por serem
 * verdadeiramente globais (usadas em toda página, não só num módulo).
 */

@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/DMSans-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('assets/fonts/DMSans-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    --studioalmadolar-accent: #2f2a26;
    --studioalmadolar-accent-soft: #efe9e3;
    --studioalmadolar-success: #2f7d4f;
    --studioalmadolar-danger: #aa3333;
    --studioalmadolar-danger-contrast: #ffffff;
    --studioalmadolar-muted: #6e625a;
    --studioalmadolar-radius: 10px;

    /* Superfície e linha — variações do próprio accent, nunca cor solta
       nova, para header/footer terem uma superfície levemente distinta
       do branco do conteúdo sem introduzir uma segunda paleta. */
    --studioalmadolar-paper: #faf8f5;
    --studioalmadolar-line: rgba(47, 42, 38, 0.14);
    --studioalmadolar-ink: #2f2a26;
    --studioalmadolar-ink-soft: rgba(47, 42, 38, 0.68);
    --studioalmadolar-surface: #ffffff;
    --studioalmadolar-surface-muted: #fafafa;
    --studioalmadolar-surface-elevated: #ffffff;
    --studioalmadolar-line-strong: rgba(47, 42, 38, 0.35);
    --studioalmadolar-accent-contrast: #ffffff;
    --studioalmadolar-link: #5d3c28;
    --studioalmadolar-focus: #8b5e3c;
    --studioalmadolar-focus-ring: rgba(139, 94, 60, 0.25);
    --studioalmadolar-toggle-track: #e3e5ea;
    --studioalmadolar-toggle-sun: #695b4e;
    --studioalmadolar-toggle-moon: #526078;

    /* Tipografia autohospedada: uma unica familia, com apenas os pesos
       realmente fornecidos pelo tema. Isso evita requisicoes externas e
       impede negritos sinteticos inconsistentes entre navegadores. */
    --studioalmadolar-font-display: 'DM Sans', sans-serif;
    --studioalmadolar-font-body: 'DM Sans', sans-serif;
}

html[data-theme='dark'] {
    --studioalmadolar-accent: #d6b79b;
    --studioalmadolar-accent-soft: #332b26;
    --studioalmadolar-accent-contrast: #201914;
    --studioalmadolar-danger: #ff8585;
    --studioalmadolar-danger-contrast: #201914;
    --studioalmadolar-muted: #bdb4ad;
    --studioalmadolar-paper: #181716;
    --studioalmadolar-surface: #111111;
    --studioalmadolar-surface-muted: #171717;
    --studioalmadolar-surface-elevated: #202020;
    --studioalmadolar-line: rgba(255, 255, 255, 0.14);
    --studioalmadolar-line-strong: rgba(255, 255, 255, 0.32);
    --studioalmadolar-ink: #f5f2ef;
    --studioalmadolar-ink-soft: rgba(245, 242, 239, 0.72);
    --studioalmadolar-link: #e2c2a6;
    --studioalmadolar-focus: #f0c9a8;
    --studioalmadolar-focus-ring: rgba(240, 201, 168, 0.35);
    --studioalmadolar-toggle-track: #1c1c1e;
    --studioalmadolar-toggle-sun: #9b938d;
    --studioalmadolar-toggle-moon: #6f9dff;
}

body {
    margin: 0;
    font-family: var(--studioalmadolar-font-body);
    font-weight: 400;
    color: var(--studioalmadolar-ink);
    background: var(--studioalmadolar-surface);
    transition: color 0.2s ease, background-color 0.2s ease;
}

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

strong,
b {
    font-weight: 600;
}

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

h1, h2, h3, h4 {
    font-family: var(--studioalmadolar-font-display);
    font-weight: 600;
    margin: 0 0 0.5em;
}

/*
 * Container de Page padrão — largura de leitura (Módulo 1, page.php).
 * Espaçamento segue DESIGN.md Seção 2 ("Container"): 4em 2em no desktop,
 * 12vw 3vw no mobile.
 */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4em 2em;
}

.page-container__title {
    max-width: 800px;
    margin: 0 auto 1em;
}

.page-container__content {
    max-width: 800px;
    margin: 0 auto;
}

/* Modelo "Largura Completa" — sem limite de largura no container em si;
   título/conteúdo internos mantêm sua própria largura de leitura. */
@media (max-width: 782px) {
    h1 {
        font-size: 6vw;
    }

    .page-container {
        padding: 12vw 3vw;
    }

}

.page-container--full-width {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.page-container__title--full-width,
.page-container__content--full-width {
    max-width: 1200px;
    padding: 0 2em;
}

@media (max-width: 782px) {
    .page-container__title--full-width,
    .page-container__content--full-width {
        padding: 0em 1em;
    }
}

.site-footer {
    border-top: 1px solid #e5e5e5;
    padding: 2em;
    text-align: center;
    margin-top: 4em;
}

.site-footer__credit {
    font-size: 0.85em;
    opacity: 0.7;
    margin: 0;
}

.site-footer__credit a {
    color: inherit;
}

/*
 * Botão reusável (Reusable Component global) — regra dos 2: usado a partir
 * desta sessão pelo card de produto da loja (`shop.css`) e pelo botão de
 * "Adicionar ao carrinho"/variação da página de produto individual
 * (`product.css`). Fica aqui (style.css) por ser sitewide, em vez de
 * duplicado em cada módulo — ver `3-reusable-components-methodology.md`,
 * seção 7. O painel do minicart (`minicart.css`) segue com seus próprios
 * botões por enquanto (dívida técnica menor, marcada em
 * DOCUMENTACAO.md — migrar quando o módulo de carrinho for revisado).
 */
.studioalmadolar-btn {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.7em 1.4em;
    border-radius: var(--studioalmadolar-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

@media (max-width: 782px) {
    .studioalmadolar-btn {
        font-size: 4vw;
    }
}

.studioalmadolar-btn--primary {
    background: var(--studioalmadolar-accent);
    border-color: var(--studioalmadolar-accent);
    color: var(--studioalmadolar-accent-contrast, #fff);
}

.studioalmadolar-btn--primary:hover {
    filter: brightness(1.1);
}

.studioalmadolar-btn--outline {
    background: var(--studioalmadolar-surface-elevated, #fff);
    border-color: var(--studioalmadolar-line-strong);
    color: var(--studioalmadolar-accent);
}

.studioalmadolar-btn--outline:hover {
    border-color: var(--studioalmadolar-accent);
}

.studioalmadolar-btn--block {
    display: flex;
    width: 100%;
}

.studioalmadolar-btn:disabled,
.studioalmadolar-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }
}