/* ============================================================================
   TXILING DESIGN SYSTEM — TEMA CLARO CARPINTARIA DIGITAL & ALTO CONTRASTE
   Elegância Africana & Padrão de Excelência da Carpintaria Digital
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* CORES - PALETA PRINCIPAL CLARA & ALTO CONTRASTE */
  --color-bg-base: #F5F2ED;            /* Fundo marfim claro característico da Carpintaria */
  --color-bg-surface: #EDEAE3;         /* Fundo secundário quente */
  --color-surface-card: #FFFFFF;       /* Cartões em branco puro e nítido */
  --color-surface-elevated: #FAF8F5;   /* Superfícies elevadas */
  
  /* ACENTOS DE MARCA */
  --color-primary: #8A6415;            /* Dourado escuro de alto contraste para leitura */
  --color-primary-gold: #C9922A;       /* Dourado clássico para detalhes */
  --color-primary-light: #E8B84B;      /* Dourado claro decorativo */
  --color-accent-emerald: #2C4A3E;     /* Verde floresta / Esmeralda Carpintaria */
  --color-accent-emerald-dark: #1A2E27;
  
  /* CORES - TEXTO COM MÁXIMA LEGIBILIDADE */
  --color-text-primary: #1C1C1A;       /* Grafite escuro profundo / Preto nobre */
  --color-text-secondary: #4A4A45;     /* Texto secundário escuro e nítido */
  --color-text-muted: #6B6B67;         /* Notas e detalhes visíveis */
  --color-text-gold: #8A6415;          /* Dourado escuro legível em fundo claro */
  --color-text-inverse: #FFFFFF;
  
  /* BORDAS & SOMBRAS */
  --color-border-subtle: #D8D3C8;      /* Borda nítida */
  --color-border-gold: rgba(201, 146, 42, 0.45);
  --color-border-focus: #2C4A3E;
  
  --shadow-sm: 0 2px 6px rgba(28, 28, 26, 0.05);
  --shadow-md: 0 6px 18px rgba(28, 28, 26, 0.07);
  --shadow-lg: 0 12px 32px rgba(28, 28, 26, 0.09);
  --shadow-gold: 0 8px 25px rgba(201, 146, 42, 0.2);
  
  /* FEEDBACK */
  --color-success: #1E6B3F;
  --color-error: #B52B2B;
  --color-warning: #C07018;
  --color-info: #1B5899;
  
  /* TIPOGRAFIA */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

p {
  color: var(--color-text-secondary);
}

a {
  color: var(--color-accent-emerald);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-gold);
}

/* BOTÕES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, #2C4A3E 0%, #1A2E27 100%);
  color: #FFFFFF !important;
  border: 1px solid #1A2E27;
  box-shadow: 0 4px 14px rgba(44, 74, 62, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #1A2E27 0%, #11201A 100%);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, #E8B84B 0%, #C9922A 100%);
  color: #1C1C1A !important;
  border: 1px solid #B88218;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(201, 146, 42, 0.25);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #F3C966 0%, #D49D33 100%);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #FFFFFF;
  color: #1C1C1A !important;
  border: 1px solid var(--color-border-subtle);
}
.btn-secondary:hover {
  background: #EDEAE3;
  border-color: var(--color-primary-gold);
}

/* CARTÕES */
.card {
  background: #FFFFFF;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.card:hover {
  border-color: var(--color-border-gold);
  box-shadow: var(--shadow-lg);
}

/* FORMULÁRIOS */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #1C1C1A;
  margin-bottom: 0.4rem;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #1C1C1A;
  background: #FFFFFF;
  border: 1px solid #D8D3C8;
  border-radius: var(--radius-md);
  outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--color-primary-gold);
  box-shadow: 0 0 0 3px rgba(201, 146, 42, 0.18);
}