/*
Theme Name: InoxMilk
Theme URI: https://example.com/inoxmilk
Author: Gabriel
Author URI: https://example.com
Description: Tema personalizado para InoxMilk
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inoxmilk
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments

This theme, like WordPress, is licensed under the GPL.
*/

/* ============================================
   Design System - InoxMilk
   ============================================ */

:root {
    /* ==========================================
       1. Cores Primitivas (Primitive Colors)
       ========================================== */
    --inoxmilk-color-primitive-steel-900: #334155; /* Cinza Chumbo - Texto principal */
    --inoxmilk-color-primitive-steel-500: #64748B; /* Cinza Soft Médio (Slate-500) - Destaques */
    --inoxmilk-color-primitive-steel-400: #94A3B8; /* Cinza Aço Inox - Bordas e divisores */

    --inoxmilk-color-primitive-steel-50:  #F8FAFC; /* Cinza Claro - Background de seções */

    --inoxmilk-color-primitive-red-500: #CD0006; /* Vermelho Conversão - CTAs principais de venda */
    --inoxmilk-color-primitive-red-600: #A00004; /* Vermelho Hover - Interação de clique */

    /* ==========================================
       2. Cores Semânticas (Semantic Colors)
       ========================================== */
    --inoxmilk-color-semantic-background-default: var(--inoxmilk-color-primitive-steel-50);
    --inoxmilk-color-semantic-background-surface: #FFFFFF;


    --inoxmilk-color-semantic-action-primary-default:  var(--inoxmilk-color-primitive-red-500);
    --inoxmilk-color-semantic-action-primary-hover:    var(--inoxmilk-color-primitive-red-600);
    --inoxmilk-color-semantic-action-secondary-hover:   var(--inoxmilk-color-primitive-steel-500);

    /* ==========================================
       3. Tipografia (Typography)
       ========================================== */
    --inoxmilk-typography-family-heading: 'Inter', sans-serif;
    --inoxmilk-typography-family-body:    'Roboto', sans-serif;

    --inoxmilk-typography-size-body:  16px;
    --inoxmilk-typography-size-h1:    40px; /* Títulos de vitrine e banners */
    --inoxmilk-typography-size-h2:    32px; /* Nomes de equipamentos no catálogo */
    --inoxmilk-typography-size-price: 24px; /* Preços para a área de e-commerce */

    --inoxmilk-typography-weight-regular: 400;
    --inoxmilk-typography-weight-medium:  500;
    --inoxmilk-typography-weight-bold:    700;

    /* ==========================================
       4. Espaçamento (Spacing)
       ========================================== */
    --inoxmilk-spacing-xs: 4px;
    --inoxmilk-spacing-sm: 8px;
    --inoxmilk-spacing-md: 16px; /* Paddings internos de cards de produto */
    --inoxmilk-spacing-lg: 24px;
    --inoxmilk-spacing-xl: 32px; /* Margens entre seções do catálogo */

    /* ==========================================
       5. Bordas (Border)
       ========================================== */
    --inoxmilk-border-radius-sm: 4px; /* Campos de formulário de cotação */
    --inoxmilk-border-radius-md: 8px; /* Cards de produtos e botões */

    /* ==========================================
       6. Mapeamento de Retrocompatibilidade
       ========================================== */
    --color-primary:        var(--inoxmilk-color-semantic-action-primary-default);
    --color-primary-hover:  var(--inoxmilk-color-semantic-action-primary-hover);
    
    --color-bg:             var(--inoxmilk-color-semantic-background-default);
    --color-surface:        var(--inoxmilk-color-semantic-background-surface);
    --color-text:           var(--inoxmilk-color-semantic-text-main);
    --color-text-muted:     var(--inoxmilk-color-semantic-text-muted);

    --font-family:          var(--inoxmilk-typography-family-body);
    --font-family-heading:  var(--inoxmilk-typography-family-heading);

    --radius-sm:            var(--inoxmilk-border-radius-sm);
    --radius-card:          var(--inoxmilk-border-radius-md);

    /* Transições */
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
