/* ===== SISTEMA TIPOGRÁFICO PADRONIZADO ===== */
/* Apenas 3 tamanhos de fonte para mobile minimalista */

/* ===== TAMANHOS BASE ===== */
:root {
  /* Typography Scale - Mobile First */
  --font-ssm: 0.63rem;  /* 14px - Textos auxiliares, legendas, observações */
  --font-sm: 0.875rem;  /* 14px - Textos auxiliares, legendas, observações */
  --font-base: 1rem;    /* 16px - Texto base, inputs, corpo do app */
  --font-lg: 1.3rem;    /* 21px - Títulos e destaques principais */
  --font-hero: 2rem;    /* 32px - Para títulos hero */
  
  /* Font Weights for Hierarchy */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
}

/* ===== CLASSES UTILITÁRIAS ===== */

/* Tamanhos */
.text-sm {
  font-size: var(--font-sm);
  line-height: 1.4;
}

.text-base {
  font-size: var(--font-base);
  line-height: 1.5;
}

.text-lg {
  font-size: var(--font-lg);
  line-height: 1.3;
}

.text-hero {
  font-size: var(--font-hero);
  line-height: 1.2;
}

/* Pesos */
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }

/* Combinações comuns */
.title-primary {
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.title-secondary {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}

.body-text {
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}

.caption {
  font-size: var(--font-sm);
  font-weight: var(--weight-regular);
  line-height: 1.4;
}

.label {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

/* ===== RESET E BASE ===== */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--dark);
}

/* Headers Hierarchy */
h1 {
  font-size: var(--font-lg);
  font-weight: var(--weight-extrabold);
  line-height: 1.2;
  margin: 0;
}

h2 {
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  margin: 0;
}

h3, h4, h5, h6 {
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  margin: 0;
}

/* Texto padrão */
p {
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  margin: 0;
}

span, div {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* Inputs */
input, textarea, select {
  font-size: var(--font-base);
  font-weight: var(--weight-regular);
  font-family: inherit;
}

/* Botões */
button {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  font-family: inherit;
}

/* Small elements */
small, .small {
  font-size: var(--font-sm);
  font-weight: var(--weight-regular);
  line-height: 1.4;
}

/* Strong elements */
strong, b {
  font-weight: var(--weight-bold);
}

/* Links */
a {
  font-size: inherit;
  font-weight: var(--weight-medium);
}

/* ===== COMPONENTES ESPECÍFICOS ===== */

/* Product Cards */
.product-name {
  font-size: var(--font-base) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.4;
}

.product-price {
  font-size: var(--font-base) !important;
  font-weight: var(--weight-extrabold) !important;
  line-height: 1.3;
}

.product-description {
  font-size: var(--font-sm) !important;
  font-weight: var(--weight-regular) !important;
  line-height: 1.4;
}

/* Badges e Status */
.status-badge {
  font-size: var(--font-sm) !important;
  font-weight: var(--weight-medium) !important;
  line-height: 1.2;
}

/* Modal Titles */
.modal-title {
  font-size: var(--font-lg) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.3;
}

.payment-modal-title {
  font-size: var(--font-sm) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.3;
}

/* Section Titles */
.section-title {
  font-size: var(--font-lg) !important;
  font-weight: var(--weight-extrabold) !important;
  line-height: 1.2;
}

/* Navigation Pills */
.cat-pill {
  font-size: var(--font-sm) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: 1.2;
}

/* Buttons */
.quantity-btn {
  font-size: var(--font-base) !important;
  font-weight: var(--weight-bold) !important;
}

.quantity-display {
  font-size: var(--font-base) !important;
  font-weight: var(--weight-bold) !important;
}

/* Payment Options */
.payment-option label {
  font-size: var(--font-base) !important;
  font-weight: var(--weight-medium) !important;
}

.payment-option small {
  font-size: var(--font-ssm) !important;
  font-weight: var(--weight-regular) !important;
}

/* Utility Classes for Weight Overrides */
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: var(--weight-regular) !important; }
.font-medium { font-weight: var(--weight-medium) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-bold { font-weight: var(--weight-bold) !important; }
.font-extrabold { font-weight: var(--weight-extrabold) !important; }