/**
 * Sistema de Design Fluido - Inspirado em Utopia.fyi
 * 
 * Escalas fluidas para tipografia e espaçamento que se adaptam
 * automaticamente entre breakpoints usando clamp()
 * 
 * Viewport: 320px (mobile) → 1440px (desktop)
 */

:root {
  /* ==================== TIPOGRAFIA FLUIDA ==================== */
  /* Escala: Minor Third (1.2) */
  /* Base: 16px (mobile) → 18px (desktop) */
  
  /* Step -2: Muito pequeno (labels, captions) */
  --step--2: clamp(0.6944rem, 0.6702rem + 0.1211vw, 0.7813rem);
  
  /* Step -1: Pequeno (small text, metadata) */
  --step--1: clamp(0.8333rem, 0.7935rem + 0.1992vw, 0.9375rem);
  
  /* Step 0: Base (body text) */
  --step-0: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
  
  /* Step 1: Médio (subtítulos, labels importantes) */
  --step-1: clamp(1.2rem, 1.1063rem + 0.4688vw, 1.35rem);
  
  /* Step 2: Grande (títulos de seção) */
  --step-2: clamp(1.44rem, 1.3031rem + 0.6844vw, 1.62rem);
  
  /* Step 3: Muito grande (títulos principais) */
  --step-3: clamp(1.728rem, 1.5313rem + 0.9844vw, 1.944rem);
  
  /* Step 4: Extra grande (hero titles) */
  --step-4: clamp(2.0736rem, 1.7969rem + 1.3828vw, 2.3328rem);
  
  /* Step 5: Gigante (display) */
  --step-5: clamp(2.4883rem, 2.1063rem + 1.9102vw, 2.7994rem);

  /* ==================== ESPAÇAMENTO FLUIDO ==================== */
  /* Escala: 1.5 (Perfect Fourth) */
  /* Base: 16px (mobile) → 20px (desktop) */
  
  /* 3XS: Espaçamento mínimo */
  --space-3xs: clamp(0.25rem, 0.2232rem + 0.1339vw, 0.3125rem);
  
  /* 2XS: Muito pequeno */
  --space-2xs: clamp(0.5rem, 0.4688rem + 0.1563vw, 0.5625rem);
  
  /* XS: Extra pequeno */
  --space-xs: clamp(0.75rem, 0.6919rem + 0.2902vw, 0.875rem);
  
  /* S: Pequeno */
  --space-s: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
  
  /* M: Médio (base) */
  --space-m: clamp(1.5rem, 1.4063rem + 0.4688vw, 1.6875rem);
  
  /* L: Grande */
  --space-l: clamp(2rem, 1.875rem + 0.625vw, 2.25rem);
  
  /* XL: Extra grande */
  --space-xl: clamp(3rem, 2.8125rem + 0.9375vw, 3.375rem);
  
  /* 2XL: Muito grande */
  --space-2xl: clamp(4rem, 3.75rem + 1.25vw, 4.5rem);
  
  /* 3XL: Gigante */
  --space-3xl: clamp(6rem, 5.625rem + 1.875vw, 6.75rem);

  /* ==================== PARES DE ESPAÇAMENTO ==================== */
  /* Para criar layouts com espaçamentos relacionados */
  
  /* One-up pairs (espaçamento + próximo nível) */
  --space-3xs-2xs: clamp(0.25rem, 0.1607rem + 0.4464vw, 0.5rem);
  --space-2xs-xs: clamp(0.5rem, 0.4063rem + 0.4688vw, 0.75rem);
  --space-xs-s: clamp(0.75rem, 0.6294rem + 0.6027vw, 1rem);
  --space-s-m: clamp(1rem, 0.8125rem + 0.9375vw, 1.5rem);
  --space-m-l: clamp(1.5rem, 1.2813rem + 1.0938vw, 2rem);
  --space-l-xl: clamp(2rem, 1.625rem + 1.875vw, 3rem);
  --space-xl-2xl: clamp(3rem, 2.5625rem + 2.1875vw, 4rem);
  --space-2xl-3xl: clamp(4rem, 3.25rem + 3.75vw, 6rem);

  /* ==================== LINE HEIGHTS FLUIDOS ==================== */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==================== LARGURAS DE CONTEÚDO ==================== */
  --content-xs: clamp(20rem, 50vw, 30rem);
  --content-s: clamp(30rem, 60vw, 45rem);
  --content-m: clamp(40rem, 70vw, 60rem);
  --content-l: clamp(50rem, 80vw, 75rem);
  --content-xl: clamp(60rem, 90vw, 90rem);

  /* ==================== BORDER RADIUS FLUIDO ==================== */
  --radius-s: clamp(0.25rem, 0.2232rem + 0.1339vw, 0.3125rem);
  --radius-m: clamp(0.5rem, 0.4688rem + 0.1563vw, 0.5625rem);
  --radius-l: clamp(0.75rem, 0.6919rem + 0.2902vw, 0.875rem);
  --radius-xl: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
}

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

/* Tipografia */
.text-step--2 { font-size: var(--step--2); }
.text-step--1 { font-size: var(--step--1); }
.text-step-0 { font-size: var(--step-0); }
.text-step-1 { font-size: var(--step-1); }
.text-step-2 { font-size: var(--step-2); }
.text-step-3 { font-size: var(--step-3); }
.text-step-4 { font-size: var(--step-4); }
.text-step-5 { font-size: var(--step-5); }

/* Espaçamento - Margin */
.m-3xs { margin: var(--space-3xs); }
.m-2xs { margin: var(--space-2xs); }
.m-xs { margin: var(--space-xs); }
.m-s { margin: var(--space-s); }
.m-m { margin: var(--space-m); }
.m-l { margin: var(--space-l); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }

/* Espaçamento - Padding */
.p-3xs { padding: var(--space-3xs); }
.p-2xs { padding: var(--space-2xs); }
.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }

/* Gap (para flexbox/grid) */
.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

/* Line Heights */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Border Radius */
.rounded-s { border-radius: var(--radius-s); }
.rounded-m { border-radius: var(--radius-m); }
.rounded-l { border-radius: var(--radius-l); }
.rounded-xl { border-radius: var(--radius-xl); }

/* ==================== APLICAÇÃO NO BODY ==================== */
body {
  font-size: var(--step-0);
  line-height: var(--line-height-normal);
}

/* ==================== COMPONENTES BASE ==================== */

/* Headings */
h1 { font-size: var(--step-4); line-height: var(--line-height-tight); margin-bottom: var(--space-m); }
h2 { font-size: var(--step-3); line-height: var(--line-height-tight); margin-bottom: var(--space-s); }
h3 { font-size: var(--step-2); line-height: var(--line-height-tight); margin-bottom: var(--space-s); }
h4 { font-size: var(--step-1); line-height: var(--line-height-normal); margin-bottom: var(--space-xs); }
h5 { font-size: var(--step-0); line-height: var(--line-height-normal); margin-bottom: var(--space-xs); }
h6 { font-size: var(--step--1); line-height: var(--line-height-normal); margin-bottom: var(--space-2xs); }

/* Parágrafos */
p { margin-bottom: var(--space-s); }
p:last-child { margin-bottom: 0; }

/* Listas */
ul, ol { 
  margin-bottom: var(--space-s); 
  padding-left: var(--space-m);
}

/* Small text */
small { font-size: var(--step--1); }

/* ==================== LAYOUT CONTAINERS ==================== */

.container-xs { max-width: var(--content-xs); margin-inline: auto; }
.container-s { max-width: var(--content-s); margin-inline: auto; }
.container-m { max-width: var(--content-m); margin-inline: auto; }
.container-l { max-width: var(--content-l); margin-inline: auto; }
.container-xl { max-width: var(--content-xl); margin-inline: auto; }

/* ==================== STACK (Vertical Spacing) ==================== */

.stack-3xs > * + * { margin-top: var(--space-3xs); }
.stack-2xs > * + * { margin-top: var(--space-2xs); }
.stack-xs > * + * { margin-top: var(--space-xs); }
.stack-s > * + * { margin-top: var(--space-s); }
.stack-m > * + * { margin-top: var(--space-m); }
.stack-l > * + * { margin-top: var(--space-l); }
.stack-xl > * + * { margin-top: var(--space-xl); }
.stack-2xl > * + * { margin-top: var(--space-2xl); }
.stack-3xl > * + * { margin-top: var(--space-3xl); }

/* ==================== CLUSTER (Horizontal Spacing) ==================== */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.cluster-3xs { gap: var(--space-3xs); }
.cluster-2xs { gap: var(--space-2xs); }
.cluster-xs { gap: var(--space-xs); }
.cluster-s { gap: var(--space-s); }
.cluster-m { gap: var(--space-m); }
.cluster-l { gap: var(--space-l); }
.cluster-xl { gap: var(--space-xl); }