/* ============================================
   DESIGN SYSTEM - CSS Variables
   Dra. Luciana Ishikawa
   ============================================ */

/* ========== FONTES LOCAIS ========== */

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

:root {
  /* ========== CORES PRIMÁRIAS ========== */
  --color-primary: #7C2639;      /* Vermelho */
  --color-secondary: #d9bfbf;    /* Nude */
  --color-neutral: #ffffff;      /* Branco */
  --color-dark: #161616;         /* Grafite Escuro */

  /* ========== CORES DE TEXTO ========== */
  --text-primary: #161616;       /* Texto em fundos claros */
  --text-light: #ffffff;         /* Texto em fundos escuros */
  --text-muted: #666666;         /* Texto secundário/muted */

  /* ========== CORES DE FUNDO ========== */
  --bg-primary: #ffffff;         /* Fundo principal branco */
  --bg-light: #f9f7f6;           /* Fundo claro/neutro */
  --bg-dark: #743747;            /* Fundo escuro (hero, seções) */
  --bg-overlay: rgba(0, 0, 0, 0.3);

  /* ========== TIPOGRAFIA - FONTES ========== */
  --font-primary: 'Exo', sans-serif;      /* Headlines */
  --font-secondary: 'Inter', sans-serif;  /* Body */

  /* ========== TIPOGRAFIA - TAMANHOS (DESKTOP) ========== */
  --h1: 48px;
  --h2: 36px;
  --h3: 28px;
  --h4: 24px;
  --body: 16px;
  --small: 14px;

  /* ========== TIPOGRAFIA - TAMANHOS (MOBILE) ========== */
  --h1-mobile: 32px;
  --h2-mobile: 26px;
  --h3-mobile: 22px;
  --h4-mobile: 20px;
  --body-mobile: 16px;

  /* ========== TIPOGRAFIA - WEIGHTS ========== */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ========== TIPOGRAFIA - LINE HEIGHTS ========== */
  --lh-tight: 1.2;
  --lh-normal: 1.25;
  --lh-relaxed: 1.3;
  --lh-body: 1.6;

  /* ========== TIPOGRAFIA - LETTER SPACING ========== */
  --ls-tight: -0.5px;
  --ls-normal: -0.3px;
  --ls-relaxed: -0.2px;
  --ls-body: 0px;

  /* ========== ESPAÇAMENTO ========== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ========== SOMBRAS ========== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* ========== TRANSIÇÕES ========== */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
}

/* ========== RESET GLOBAL ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

/* ========== TIPOGRAFIA GLOBAL ========== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

h1 {
  font-size: var(--h1);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--h2);
  letter-spacing: var(--ls-normal);
}

h3 {
  font-size: var(--h3);
  letter-spacing: var(--ls-relaxed);
}

h4 {
  font-size: var(--h4);
  font-weight: var(--weight-semibold);
}

p {
  margin-bottom: var(--spacing-md);
  line-height: var(--lh-body);
}

/* ========== LINKS ========== */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

/* ========== CONTAINER PRINCIPAL ========== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ========== SEÇÕES ========== */
section {
  padding: var(--spacing-3xl) var(--spacing-lg);
}

section.bg-light {
  background-color: var(--bg-light);
}

section.bg-dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

section.bg-dark h1,
section.bg-dark h2,
section.bg-dark h3,
section.bg-dark h4 {
  color: var(--text-light);
}