/* ===================================
   SMA Boutique - Design Tokens
   Valores extraídos da home.html refatorada
   (header-xd.css, footer-xd.css, home-xd.css)
   ================================== */

:root {
  /* ===================================
     PALETA DE CORES
     ================================== */

  /* Cor principal da marca — marrom dourado */
  --brand-primary: #8C6D3A;
  --brand-primary-dark: #674F27;
  --brand-primary-light: #C6AF62;

  /* Cores secundárias — dourado */
  --brand-secondary: #C0AE51;
  --brand-accent: #C6AF62;

  /* Cores de fundo */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2EEDD;
  --bg-tertiary: #ECE9DF;

  /* Cores de texto */
  --text-primary: #383838;
  --text-secondary: #8C6D3A;
  --text-muted: #C7B69B;
  --text-on-brand: #F2EEDD;

  /* Cores de apoio */
  --color-footer-bg: #8C6D3A;
  --color-footer-benefits-bg: #674F27;
  --color-footer-text: #C7B69B;
  --color-border-gold: #C0AE5138;
  --color-header-line: #D7CFBA;
  --color-header-divider: #E6B5C8;
  --color-overlay-light: rgba(242, 238, 221, 0.23);
  --color-overlay-warm: rgba(182, 159, 144, 0.28);

  /* ===================================
     GRADIENTES
     ================================== */

  --gradient-primary: linear-gradient(135deg, #8C6D3A 0%, #C6AF62 100%);
  --gradient-secondary: linear-gradient(135deg, #C0AE51 0%, #C6AF62 100%);
  --gradient-hero: linear-gradient(
    120deg,
    rgba(242, 238, 221, 0.56) 0%,
    rgba(242, 238, 221, 0.2) 46%,
    rgba(192, 174, 81, 0.24) 100%
  );
  --gradient-category-placeholder: linear-gradient(135deg, #F2EEDD 0%, #E4DECB 100%);
  --gradient-benefit-placeholder: linear-gradient(135deg, #B08D7D 0%, #7D5A4F 100%);

  /* ===================================
     TIPOGRAFIA
     ================================== */

  /* Família de fontes */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Cinzel", serif;
  --font-display: "Cinzel", serif;

  /* Tamanhos de fonte — Hero */
  --font-size-hero-h1: 58px;
  --font-size-hero-h1-tablet: 48px;
  --font-size-hero-h1-mobile-md: 42px;
  --font-size-hero-h1-mobile-sm: 36px;
  --font-size-hero-subtitle: 17px;
  --font-size-hero-subtitle-tablet: 16px;
  --font-size-hero-subtitle-mobile-md: 15px;
  --font-size-hero-subtitle-mobile-sm: 14px;

  /* Tamanhos de fonte — Seções */
  --font-size-section-title: 41px;
  --font-size-section-title-mobile: 36px;
  --font-size-categories-side-title: 41px;
  --font-size-categories-side-title-mobile: 34px;
  --font-size-categories-description: 17px;

  /* Tamanhos de fonte — Componentes */
  --font-size-card-title: 23px;
  --font-size-card-title-tablet: 21px;
  --font-size-card-title-mobile: 19px;
  --font-size-card-price: 30px;
  --font-size-card-price-tablet: 28px;
  --font-size-card-price-mobile: 26px;
  --font-size-card-btn: 15px;
  --font-size-card-btn-tablet: 14px;
  --font-size-card-btn-mobile: 13px;
  --font-size-category-name: 25px;
  --font-size-category-name-tablet: 22px;
  --font-size-category-name-mobile: 20px;

  /* Tamanhos de fonte — Botões */
  --font-size-button: 20px;
  --font-size-button-tablet: 18px;
  --font-size-button-mobile: 16px;

  /* Tamanhos de fonte — Footer */
  --font-size-footer-heading: 35px;
  --font-size-footer-heading-tablet: 24px;
  --font-size-footer-heading-mobile: 20px;
  --font-size-footer-body: 20px;
  --font-size-footer-body-tablet: 16px;
  --font-size-footer-body-mobile: 14px;
  --font-size-footer-benefit-title: 35px;
  --font-size-footer-benefit-title-tablet: 22px;
  --font-size-footer-benefit-title-mobile: 18px;
  --font-size-footer-benefit-text: 20px;
  --font-size-footer-benefit-text-tablet: 14px;
  --font-size-footer-benefit-text-mobile: 13px;

  /* Tamanhos de fonte — Additional Content */
  --font-size-additional-text: 25px;
  --font-size-additional-text-mobile: 26px;

  /* Pesos de fonte */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Alturas de linha */
  --line-height-hero-title: 63px;
  --line-height-hero-title-tablet: 52px;
  --line-height-hero-title-mobile-md: 46px;
  --line-height-hero-title-mobile-sm: 40px;
  --line-height-hero-subtitle: 22px;
  --line-height-section-title: 55px;
  --line-height-section-title-mobile: 48px;
  --line-height-categories-side-title: 40px;
  --line-height-categories-side-title-mobile: 36px;
  --line-height-card-title: 28px;
  --line-height-card-price: 28px;
  --line-height-button: 28px;
  --line-height-nav: 26px;
  --line-height-footer-body: 30px;
  --line-height-additional-text: 35px;
  --line-height-additional-text-mobile: 34px;

  /* ===================================
     ESPAÇAMENTOS
     ================================== */

  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-5xl: 5.25rem;   /* 84px — margem additional content */

  /* Espaçamentos de seções */
  --section-padding-y: 5rem;
  --section-padding-y-mobile: 3rem;

  /* Espaçamentos de componentes */
  --card-padding: 18px 16px;
  --card-padding-mobile: 16px 14px;
  --card-gap: 12px;
  --card-gap-mobile: 10px;
  --button-padding-x: 14px;
  --button-padding-y: 0;

  /* ===================================
     DIMENSÕES — HEADER
     ================================== */

  --header-top-strip-height: 42px;
  --header-top-strip-height-tablet: 32px;
  --header-top-strip-height-mobile: 28px;
  --header-main-height: 126px;
  --header-main-height-tablet: 96px;
  --header-main-height-mobile: 82px;
  --header-width: 1920px;
  --header-position: 0px;
  --header-logo-width: 274px;
  --header-logo-height: 80px;
  --header-logo-width-tablet: 212px;
  --header-logo-height-tablet: 62px;
  --header-logo-width-mobile: 178px;
  --header-logo-height-mobile: 52px;
  --header-nav-width: 499px;
  --header-nav-gap: 29px;
  --header-nav-border: 3px solid #8C6D3A29;
  --header-icon-size: 2rem;
  --header-icon-size-tablet: 1.5rem;
  --header-icon-size-mobile: 1.35rem;

  /* ===================================
     DIMENSÕES — HERO
     ================================== */

  --hero-height: 633px;
  --hero-height-tablet: 520px;
  --hero-height-mobile: 460px;
  --hero-title-width: 681px;
  --hero-subtitle-width: 564px;
  --hero-btn-width: 263px;
  --hero-btn-height: 52px;
  --hero-btn-width-tablet: 240px;
  --hero-btn-height-tablet: 48px;
  --hero-btn-width-mobile: 220px;
  --hero-btn-height-mobile: 44px;

  /* ===================================
     DIMENSÕES — PRODUCT CARDS
     ================================== */

  --product-card-max-width: 315px;
  --product-image-height: 422px;
  --product-image-height-mobile: 360px;
  --product-content-height: 219px;
  --product-content-height-mobile: 200px;
  --product-name-width: 297px;
  --product-name-height: 60px;
  --product-price-width: 158px;
  --product-price-height: 43px;
  --product-btn-min-width: 207px;
  --product-btn-min-width-tablet: 180px;
  --product-btn-min-width-mobile: 160px;
  --product-btn-height: 40px;
  --product-btn-height-tablet: 38px;
  --product-btn-height-mobile: 36px;

  /* ===================================
     DIMENSÕES — CATEGORY CARDS
     ================================== */

  --category-card-width: 220px;
  --category-card-height: 230px;
  --category-card-width-tablet: 200px;
  --category-card-height-tablet: 210px;
  --category-card-width-mobile: 180px;
  --category-card-height-mobile: 190px;
  --category-back-width: 196px;
  --category-back-height: 223px;
  --category-back-width-tablet: 180px;
  --category-back-height-tablet: 200px;
  --category-back-width-mobile: 160px;
  --category-back-height-mobile: 180px;
  --category-front-width: 176px;
  --category-front-height: 190px;
  --category-front-width-tablet: 160px;
  --category-front-height-tablet: 175px;
  --category-front-width-mobile: 145px;
  --category-front-height-mobile: 160px;
  --category-name-width: 162px;
  --category-name-height: 35px;

  /* ===================================
     DIMENSÕES — ADDITIONAL CONTENT
     ================================== */

  --additional-container-max-width: 1100px;
  --additional-container-min-height: 355px;
  --additional-container-min-height-mobile: 320px;
  --additional-container-gap: 26px;
  --additional-image-width: 537px;
  --additional-image-height: 355px;
  --additional-image-height-mobile: 320px;
  --additional-overlay-width: 224px;
  --additional-text-width: 188px;
  --additional-text-top: 107px;
  --additional-text-top-mobile: 60px;

  /* ===================================
     DIMENSÕES — CTA BUTTONS
     ================================== */

  --cta-featured-width: 403px;
  --cta-featured-width-tablet: 320px;
  --cta-featured-width-mobile: 280px;
  --cta-featured-height: 52px;
  --cta-featured-height-tablet: 48px;
  --cta-featured-height-mobile: 44px;

  /* ===================================
     DIMENSÕES — FOOTER
     ================================== */

  --footer-design-width: 1920px;
  --footer-benefits-height: 183px;
  --footer-main-height: 379px;
  --footer-logo-width: 555px;
  --footer-logo-height: 162px;
  --footer-divider-width: 1317px;
  --footer-benefit-icon-size-1: 67px;
  --footer-benefit-icon-size-2: 79px;
  --footer-benefit-icon-size-3: 65px;
  --footer-benefit-icon-size-tablet: 40px;
  --footer-benefit-icon-size-mobile: 32px;

  /* ===================================
     DIMENSÕES — CAROUSEL CONTROLS
     ================================== */

  --carousel-control-width: 36px;
  --carousel-control-height: 72px;
  --carousel-control-width-tablet: 32px;
  --carousel-control-height-tablet: 64px;
  --carousel-control-width-mobile: 28px;
  --carousel-control-height-mobile: 56px;
  --carousel-control-offset: -34px;
  --carousel-control-offset-tablet: -28px;
  --carousel-control-offset-mobile: -24px;
  --carousel-icon-width: 14px;
  --carousel-icon-height: 24px;
  --carousel-icon-width-mobile: 12px;
  --carousel-icon-height-mobile: 20px;

  /* ===================================
     BORDER RADIUS
     ================================== */

  --border-radius-sm: 10px;
  --border-radius-md: 25px;
  --border-radius-lg: 25px;
  --border-radius-card-top: 25px 25px 0 0;
  --border-radius-card-bottom: 0 0 25px 25px;
  --border-radius-category-back: 25px 0;
  --border-radius-category-front: 0 40px 0 40px;
  --border-radius-full: 50%;

  /* ===================================
     SOMBRAS E EFEITOS
     ================================== */

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.2);
  --shadow-additional-overlay: 20px 3px 25px #00000096;
  --shadow-additional-overlay-secondary: 20px 3px 25px #00000066;
  --shadow-text: 0 3px 6px #00000029;

  /* Sombras com cor da marca */
  --shadow-brand-light: 0 2px 15px rgba(140, 109, 58, 0.1);
  --shadow-brand-medium: 0 8px 30px rgba(140, 109, 58, 0.15);
  --shadow-brand-heavy: 0 15px 35px rgba(140, 109, 58, 0.2);

  /* Backdrop blur */
  --backdrop-blur: blur(31px);

  /* ===================================
     TRANSIÇÕES E ANIMAÇÕES
     ================================== */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===================================
     BREAKPOINTS RESPONSIVOS
     ================================== */

  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;

  /* ===================================
     SECTION TITLE DECORATIVE LINES
     ================================== */

  --section-line-width: 379px;
  --section-line-border: 3px solid #C0AE51;
  --section-line-opacity: 0.22;
  --categories-side-line-width: 431px;

  /* ===================================
     CORES — STATUS DE PAGAMENTO
     Extraídas do Figma node 70:2306
     ================================== */

  --color-status-pending: #FFD600;
  --color-status-pending-text: #8C6D3A;

  /* ===================================
     TIPOGRAFIA — PÁGINAS INTERNAS
     (Order Detail, Order History, etc.)
     Extraídas do Figma node 70:2306
     ================================== */

  /* Títulos de página (hero banner interno) */
  --font-size-page-title: 55px;
  --font-size-page-title-mobile: 36px;

  /* Título do pedido (#000) */
  --font-size-order-title: 30px;

  /* Títulos de seção dentro da página */
  --font-size-section-heading: 25px;

  /* Sub-headers (Informações do pedido, Endereço, Frete…) */
  --font-size-subsection-heading: 20px;

  /* Labels de campo (Data do Pedido, Forma de Pagamento…) */
  --font-size-field-label: 15px;

  /* Cabeçalho da tabela de itens */
  --font-size-table-header: 14px;

  /* Conteúdo de tabela / valores */
  --font-size-table-body: 15px;
  --font-size-table-body-lg: 16px;

  /* Texto de endereço / corpo secundário */
  --font-size-body-sm: 12px;

  /* Badge de status de pagamento */
  --font-size-status-badge: 10px;

  /* ===================================
     DIMENSÕES — ORDER STATUS STEPS
     (Timeline estilo Figma)
     ================================== */

  /* Bloco de step (Pendente, Processando, Enviado, Entregue) */
  --order-step-height: 58.758px;
  --order-step-width: 306.815px;
  --order-step-border-radius: 10px;

  /* Badge numérico do step */
  --order-step-badge-size: 49.26px;
  --order-step-badge-border-radius: 6px;

  /* Número dentro do badge */
  --font-size-order-step-number: 30px;

  /* ===================================
     DIMENSÕES — TABELA DE ITENS DO PEDIDO
     ================================== */

  /* Header da tabela */
  --order-table-header-height: 46.52px;
  --order-table-header-border-radius: 10px;
  --order-table-header-border: 1px solid #C0AE51;

  /* Thumbnail do produto na tabela */
  --order-item-thumbnail-size: 87px;

  /* ===================================
     DIMENSÕES — BOTÕES DE AÇÃO (ORDER DETAIL)
     ================================== */

  /* Botões CTA inferiores */
  --order-action-btn-height: 46.52px;
  --order-action-btn-width: 250.269px;
  --order-action-btn-border-radius: 10px;
  --order-action-btn-border: 2px solid #C0AE51;

  /* Botão Voltar (outline pequeno no topo) */
  --order-back-btn-height: 46.52px;
  --order-back-btn-width: 123.244px;
  --order-back-btn-border-radius: 10px;
  --order-back-btn-border: 1px solid #C0AE51;

  /* ===================================
     DIMENSÕES — BANNER HERO INTERNO
     (faixa "Meus Pedidos")
     ================================== */

  --page-hero-height: 156px;
  --page-hero-bg: rgba(242, 238, 221, 0.39);
}