# MontaLoja - Sistema de Tema Global

## Estrutura de Arquivos

```
assets/css/
├── theme.css          # CSS base com variáveis :root e estilos globais
├── theme-vars.php     # Gerador dinâmico de variáveis CSS
└── README.md          # Esta documentação

includes/
├── theme-helper.php   # Funções PHP auxiliares para o tema
└── styles.css         # CSS específico do template (existente)
```

## Como Usar

### Método 1: Usando o Theme Helper (Recomendado)

No início do arquivo PHP da página:

```php
<?php
// Incluir o helper
require_once __DIR__ . '/includes/theme-helper.php';

// ... código existente (buscar dados da loja, etc) ...
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <?php echo themeHead($store, 'Título da Página'); ?>
    
    <!-- CSS específico da página (opcional) -->
    <link rel="stylesheet" href="/pages/storefront/templates/retail/modern/includes/styles.css">
</head>
```

### Método 2: Inclusão Manual

```html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- CSS Global do Tema -->
    <link rel="stylesheet" href="/pages/storefront/templates/retail/modern/assets/css/theme.css">
    
    <!-- Variáveis Dinâmicas do Tema -->
    <style>
    <?php
    $store = [...]; // Dados da loja do banco
    include __DIR__ . '/assets/css/theme-vars.php';
    ?>
    </style>
    
    <!-- CSS específico do template -->
    <link rel="stylesheet" href="/pages/storefront/templates/retail/modern/includes/styles.css">
</head>
```

## Variáveis CSS Disponíveis

### Cores Primárias
```css
--primary: #2563EB;           /* Cor principal */
--primary-rgb: 37, 99, 235;   /* RGB para uso com rgba() */
--primary-soft: rgba(...);    /* Versão suave (8% opacidade) */
--primary-hover: #1D4ED8;     /* Hover state */
--primary-light: #DBEAFE;     /* Versão clara */
--primary-dark: #1E40AF;      /* Versão escura */
```

### Cores de Destaque
```css
--accent: #10B981;
--accent-rgb: 16, 185, 129;
--accent-soft: rgba(...);
--accent-hover: #059669;
--accent-light: #D1FAE5;
```

### Cores de Fundo e Superfície
```css
--bg: #FAFBFC;               /* Background principal */
--bg-white: #FFFFFF;         /* Background branco */
--bg-card: #FFFFFF;          /* Background de cards */
--surface: #FFFFFF;          /* Superfícies elevadas */
--surface-hover: #F8F9FA;    /* Hover em superfícies */
--surface-secondary: #F3F4F6; /* Superfície secundária */
```

### Cores de Texto
```css
--text: #111827;             /* Texto principal */
--text-secondary: #4B5563;   /* Texto secundário */
--text-muted: #6B7280;       /* Texto mutado */
--text-light: #9CA3AF;       /* Texto claro */
--text-inverse: #FFFFFF;     /* Texto inverso (em fundos escuros) */
```

### Cores de Status
```css
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
--info: #3B82F6;
```

### Bordas
```css
--border: #E5E7EB;
--border-light: #F3F4F6;
--border-dark: #D1D5DB;
```

### Sombras
```css
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
--shadow-primary: 0 4px 14px rgba(var(--primary-rgb), 0.25);
--shadow-accent: 0 4px 14px rgba(var(--accent-rgb), 0.25);
```

### Border Radius
```css
--radius-xs: 4px;
--radius-sm: 6px;
--radius: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
```

### Tipografia
```css
--font-family: 'Plus Jakarta Sans', sans-serif;
--text-xs: 0.75rem;   /* 12px */
--text-sm: 0.875rem;  /* 14px */
--text-base: 1rem;    /* 16px */
--text-lg: 1.125rem;  /* 18px */
--text-xl: 1.25rem;   /* 20px */
--text-2xl: 1.5rem;   /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem;  /* 36px */
```

### Espaçamentos
```css
--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-5: 1.25rem;  /* 20px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-10: 2.5rem;  /* 40px */
--space-12: 3rem;    /* 48px */
```

### Z-Index
```css
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 400;
--z-modal: 500;
--z-toast: 800;
```

### Transições
```css
--transition-fast: 150ms ease;
--transition: 200ms ease;
--transition-normal: 300ms ease;
--transition-slow: 500ms ease;
```

## Classes Utilitárias Incluídas

### Cores de Texto
```html
<p class="text-primary">Texto na cor primária</p>
<p class="text-accent">Texto na cor de destaque</p>
<p class="text-success">Texto de sucesso</p>
<p class="text-warning">Texto de aviso</p>
<p class="text-error">Texto de erro</p>
<p class="text-muted">Texto mutado</p>
```

### Backgrounds
```html
<div class="bg-primary">Background primário</div>
<div class="bg-primary-soft">Background primário suave</div>
<div class="bg-accent">Background de destaque</div>
<div class="bg-success-soft">Background de sucesso suave</div>
```

### Componentes
```html
<!-- Container -->
<div class="container">Conteúdo centralizado</div>

<!-- Card -->
<div class="card">
    <div class="card-header">Título</div>
    <div class="card-body">Conteúdo</div>
    <div class="card-footer">Rodapé</div>
</div>

<!-- Botões -->
<button class="btn btn-primary">Primário</button>
<button class="btn btn-accent">Destaque</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>

<!-- Inputs -->
<input type="text" class="input" placeholder="Digite...">
<input type="text" class="input input-lg" placeholder="Input grande">

<!-- Badges -->
<span class="badge badge-primary">Novo</span>
<span class="badge badge-success">Ativo</span>
<span class="badge badge-warning">Pendente</span>

<!-- Alerts -->
<div class="alert alert-success">Sucesso!</div>
<div class="alert alert-warning">Atenção!</div>
<div class="alert alert-error">Erro!</div>

<!-- Spinner -->
<div class="spinner"></div>
```

## Funções PHP do Theme Helper

### `themeAsset($path)`
Retorna o caminho correto para assets do tema.

```php
<link rel="stylesheet" href="<?php echo themeAsset('css/theme.css'); ?>">
```

### `themeStylesheet()`
Retorna a tag link para o CSS do tema.

```php
<?php echo themeStylesheet(); ?>
```

### `themeVariables($store)`
Gera o bloco `<style>` com as variáveis CSS dinâmicas.

```php
<?php echo themeVariables($store); ?>
```

### `themeHead($store, $pageTitle, $extraMeta)`
Gera todo o conteúdo do `<head>` com tema.

```php
<?php echo themeHead($store, 'Página Inicial', ['<meta property="og:image" content="...">']); ?>
```

### `hexToRgbValues($hex)`
Converte cor HEX para valores RGB.

```php
$rgb = hexToRgbValues('#2563EB'); // "37, 99, 235"
```

### `adjustColorBrightness($hex, $percent)`
Ajusta o brilho de uma cor.

```php
$darker = adjustColorBrightness('#2563EB', -15); // 15% mais escuro
$lighter = adjustColorBrightness('#2563EB', 30); // 30% mais claro
```

### `isColorDark($hex)`
Verifica se uma cor é escura.

```php
if (isColorDark($bgColor)) {
    $textColor = '#FFFFFF';
}
```

### `getContrastTextColor($bgColor)`
Retorna cor de texto ideal para contraste.

```php
$textColor = getContrastTextColor('#2563EB'); // "#FFFFFF"
```
