/**
 * Mindcommerce — Design Tokens
 *
 * Fonte única de valores de design do tema (D-05). Fonte de verdade:
 * visual-direction.md (aprovado em 2026-09-23) + decisões D-07 / DT-01..DT-08.
 *
 * Regras:
 * - Este arquivo contém APENAS declarações de CSS Custom Properties em :root.
 * - Componentes nunca usam valores literais — sempre var(--token).
 * - Temas de cliente (client-themes/[slug].css) sobrescrevem apenas variáveis.
 * - Unidades (DT-01): rem para tipografia e espaçamento; px para limites de
 *   layout, bordas, raios e breakpoints.
 *
 * @package mindcommerce
 */

/* =============================================================================
   1. CORES — paleta Mindbrand (D-11) + verde de conversão fixo
   Fonte única de cor: o preset do Personalizador (mc/presets/*.json) é GERADO destes
   tokens por tools/make-preset.py (D-39); não edite o preset à mão.
   ============================================================================= */
:root {
	/* Conversão — verde fixo em qualquer tema de cliente (D-11): botões de compra,
	   selos de desconto/oferta, preço, ícone do carrinho */
	--color-conversion:       #1E7B34;
	--color-conversion-hover: #176A2B;
	--color-on-conversion:    #FFFFFF;
	--color-conversion-text:  #1E7B34;

	/* Primária */
	--color-primary:        #35105E;
	--color-primary-hover:  #1F0539;
	--color-primary-active: #1F0539;
	--color-primary-light:  #8574A0;
	--color-primary-tint:   #F4F2F7;
	--color-on-primary:     #FFFFFF;
	--color-secondary:       #C2410C;
	--color-secondary-hover: #35105E;
	--color-bg-page:    #FFFFFF;
	--color-bg-card:    #FFFFFF;
	--color-bg-overlay: rgba(0, 0, 0, 0.50);
	--color-bg-input:   #FFFFFF;
	--color-bg-subtle:  #F4F2F7;
	--color-text-primary:        #1F0539;
	--color-text-secondary:      #55496A;
	--color-text-disabled:       #A99BBC;
	--color-text-placeholder:    #8A7F9C;
	--color-text-inverse:        #FFFFFF;
	--color-text-inverse-muted:  rgba(255, 255, 255, 0.80); /* §4 — texto secundário sobre fundo escuro */
	--color-text-link:           #C2410C;
	--color-text-link-hover:     #35105E;
	--color-border-default: #EAE7EF;
	--color-border-strong:  #B7AEC4;
	--color-border-focus:   #35105E;
	--color-border-error:   #EF4444;

	/* Status */
	--color-success:        #15803D;
	--color-success-bg:     #F0FDF4;
	--color-success-border: #86EFAC;
	--color-error:          #B91C1C; /* D-07: era #DC2626 (4.41:1 sobre error-bg) */
	--color-error-bg:       #FEF2F2;
	--color-error-border:   #FCA5A5;
	--color-warning:        #B45309;
	--color-warning-bg:     #FFFBEB;
	--color-warning-border: #FDE68A;
	--color-info:           #1D4ED8;
	--color-info-bg:        #EFF6FF;
	--color-info-border:    #BFDBFE;

	/* Badges */
	--color-badge-discount:          #1E7B34;
	--color-badge-discount-text:     #FFFFFF;
	--color-badge-new:               #15803D;
	--color-badge-new-text:          #FFFFFF;
	--color-badge-featured:          #1E7B34;
	--color-badge-featured-text:     #FFFFFF;
	--color-badge-out-of-stock:      #E5E7EB;
	--color-badge-out-of-stock-text: #4B5563; /* D-07: era #6B7280 (3.90:1) */

	/* Rating — estrelas sempre acompanhadas de nota/contagem (2.15:1, ícone decorativo) */
	--color-rating-star:       #EE9E13;
	--color-rating-star-empty: #D1D5DB;

	/* Estrutura do site (cabeçalho, menu, rodapé) — D-39.
	   Alimentam o preset do Personalizador (tools/make-preset.py), então uma troca
	   de identidade acontece só aqui ou em client-themes/. Os aliases acompanham a
	   cor primária; sobrescreva individualmente se o cliente pedir. */
	--color-header-text:   #3B3049;
	--color-nav-bg:        var(--color-primary-hover);
	--color-nav-text:      var(--color-text-inverse);
	--color-nav-hover:     #FF8534;
	/* Rodapé claro (D-43): branco sobre a página cinza */
	--color-footer-bg:         var(--color-bg-page);
	--color-footer-text:       var(--color-text-secondary);
	--color-footer-link:       var(--color-text-secondary);
	--color-footer-link-hover: var(--color-primary);
	--color-footer-heading:    var(--color-text-primary);
	--color-footer-border:     var(--color-border-default);
	--color-icon-muted:    #6B6079;
}

/* =============================================================================
   2. TIPOGRAFIA — visual-direction §4 (+ DT-02, DT-03)
   Mobile-first: display/h1/h2 reduzidos no base; valores de §4 a partir de 1024px.
   ============================================================================= */
:root {
	--font-primary: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

	/* Tamanhos */
	--text-display: 2.25rem;   /* 36px mobile → 56px desktop */
	--text-h1:      2rem;      /* 32px mobile → 40px desktop */
	--text-h2:      1.5rem;    /* 24px mobile → 28px desktop */
	--text-h3:      1.125rem;  /* 18px */
	--text-section: 1.25rem; /* 20px — títulos de seção da página de produto (D-40) */
	--text-product-title: 1.5rem; /* 24px — título do produto no cartão de compra (D-40) */
	--text-h4:      0.875rem;  /* 14px */
	--text-body-lg: 1.125rem;  /* 18px */
	--text-body:    1rem;      /* 16px — mínimo em inputs (evita zoom no iOS) */
	--text-body-sm: 0.875rem;  /* 14px */
	--text-caption: 0.6875rem; /* 11px */
	--text-button:  0.9375rem; /* 15px */
	--text-badge:   0.6875rem; /* 11px */

	/* Pesos */
	--font-weight-regular:   400;
	--font-weight-medium:    500;
	--font-weight-semibold:  600;
	--font-weight-bold:      700;
	--font-weight-extrabold: 800;

	/* Line-height por nível */
	--line-height-display: 1.1;
	--line-height-h1:      1.2;
	--line-height-h2:      1.25;
	--line-height-h3:      1.35;
	--line-height-h4:      1.4;
	--line-height-body-lg: 1.6;
	--line-height-body:    1.6;
	--line-height-body-sm: 1.5;
	--line-height-caption: 1.4;
	--line-height-button:  1;
	--line-height-badge:   1;

	/* Letter-spacing por nível */
	--letter-spacing-display: -0.02em;
	--letter-spacing-h1:      -0.01em;
	--letter-spacing-h2:      -0.01em;
	--letter-spacing-h3:      0;
	--letter-spacing-h4:      0;
	--letter-spacing-body-lg: 0;
	--letter-spacing-body:    0;
	--letter-spacing-body-sm: 0;
	--letter-spacing-caption: 0.06em;
	--letter-spacing-button:  0.01em;
	--letter-spacing-badge:   0.02em;
}

@media (min-width: 1024px) {
	:root {
		--text-display: 3.5rem;  /* 56px */
		--text-h1:      2.5rem;  /* 40px */
		--text-h2:      1.75rem; /* 28px */
	}
}

/* =============================================================================
   3. ESPAÇAMENTO — visual-direction §6 (base 4px)
   ============================================================================= */
:root {
	--space-2xs: 0.125rem; /*  2px */
	--space-xs:  0.25rem;  /*  4px */
	--space-sm:  0.5rem;   /*  8px */
	--space-md:  0.75rem;  /* 12px */
	--space-lg:  1rem;     /* 16px */
	--space-xl:  1.5rem;   /* 24px */
	--space-2xl: 2rem;     /* 32px */
	--space-3xl: 3rem;     /* 48px */
	--space-4xl: 4rem;     /* 64px */
	--space-5xl: 5rem;     /* 80px */
	--space-6xl: 6rem;     /* 96px */
}

/* =============================================================================
   4. LAYOUT — visual-direction §3 e §6
   ============================================================================= */
:root {
	--container-max-width:      1280px;
	--container-max-width-wide: 1440px;
	--container-padding-x:      32px; /* desktop */
	--container-padding-x-md:   24px; /* tablet */
	--container-padding-x-sm:   16px; /* mobile */

	--grid-gutter-sm: 0.75rem; /* 12px — mobile */
	--grid-gutter-md: 1rem;    /* 16px — tablet */
	--grid-gutter-lg: 1.5rem;  /* 24px — desktop */
	--grid-gutter-xl: 2rem;    /* 32px — wide */

	--sidebar-width: 280px;
}

/* =============================================================================
   5. HEADER — visual-direction §3 e §8 (DT-06: aliases)
   ============================================================================= */
:root {
	--header-top-height:    72px;
	--header-nav-height:    48px;
	--header-total-height:  calc(var(--header-top-height) + var(--header-nav-height));
	--header-sticky-height: 56px;
	--sticky-offset:        0rem; /* altura real do cabeçalho fixo na tela; atualizada por mc/assets/js/pdp.js (D-40) */
	--header-sticky-shadow: var(--shadow-sticky);
	--header-bg-top:        var(--color-bg-card);
	--header-bg-nav:        var(--color-bg-subtle);
	--header-border-bottom: var(--color-border-default);
}

/* =============================================================================
   6. COMPONENTES — radius, sombra, transição, dimensões (DT-04, DT-05)
   ============================================================================= */
:root {
	/* Radius */
	--radius-sm:   8px;
	--radius-md:   12px;
	--radius-lg:   16px;
	--radius-xl:   20px;
	--radius-pill: 50px;

	/* Sombras */
	--shadow-card:       0 2px 12px rgba(0, 0, 0, 0.06);
	--shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.10);
	--shadow-sticky:     0 2px 8px rgba(0, 0, 0, 0.08);

	/* Transições — uso: transition: background var(--transition-fast); */
	--transition-fast: 150ms ease;     /* botões, links */
	--transition-base: 200ms ease;     /* cards, header sticky, dropdowns */
	--transition-slow: 250ms ease-out; /* drawers, menu mobile */

	/* Dimensões */
	--tap-target-min:      44px;
	--button-height:       44px;
	--button-height-lg:    52px;
	--input-height:        48px;
	--border-width:        1px;
	--border-width-strong: 1.5px;
	--focus-ring-width:    2px;
	--focus-ring-offset:   2px;
	--cart-thumb-width:    80px; /* miniatura do item no carrinho (igual ao WooCommerce) */
}

/* =============================================================================
   7. BREAKPOINTS — referência (visual-direction §3)
   ATENÇÃO: var() NÃO funciona dentro de @media. As media queries usam os
   valores literais: @media (min-width: 768px) / 1024px / 1440px.
   Estes tokens servem para consulta via JS (getComputedStyle) e documentação.
   ============================================================================= */
:root {
	--bp-mobile:  375px;
	--bp-tablet:  768px;
	--bp-desktop: 1024px;
	--bp-wide:    1440px;
}