/**
 * Design system - Variáveis reutilizáveis
 * Baseado no Figma portfolio-2025
 */

/* Fonte do logo POLY ANDRADE (hero e footer) – arquivos em assets/fonts/ */
@font-face {
  font-family: 'ED Nimpkish';
  src: url('../fonts/EDNimpkish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Largura do conteúdo (desktop) */
  --content-max-width: 900px;
  --content-padding-x: clamp(24px, 5vw, 48px);
  --section-padding-y: clamp(48px, 6vw, 96px);
  --section-padding-y-sm: clamp(40px, 5vw, 64px);

  /* Cores - Fundo */
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-bg-dark: #000000;

  /* Cores - Texto */
  --color-text: #000000;
  --color-text-muted: rgba(0, 0, 0, 0.6);
  --color-text-muted-light: rgba(0, 0, 0, 0.5);
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.6);

  /* Cores - Destaque */
  --color-accent: #cb462e;
  --color-accent-soft: #efbde2;
  --color-project-title: #97adc6;

  /* Cores - UI */
  --color-border: rgba(0, 0, 0, 0.2);
  --color-border-dark: rgba(255, 255, 255, 0.2);
  --color-placeholder: #d9d9d9;

  /* Tipografia - Famílias */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-logo: 'ED Nimpkish', var(--font-sans);
  --font-display: 'DM Sans', system-ui, sans-serif;

  /* Tipografia - Tamanhos (reutilizáveis em outras páginas) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.366;
  --leading-relaxed: 1.45;

  /* Pesos (conforme layout Figma – DM Sans)
   * Light 300: intro hero, tags de projeto, descrições, timeline period/company/desc, subtítulo trajetória
   * Regular 400: corpo de texto, títulos de seção, statement, tech-lead, logo, legendas
   * Medium 500: títulos de card de projeto, cargo na timeline, botão “Currículo completo”
   * SemiBold 600: início de frases em blocos (ex.: princípios)
   * Bold 700: botões primário/secundário, títulos de bloco (ex.: “Começar pelo problema”), “Princípios que guiam”
   */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Botões - sombra (estilo Figma) */
  --button-shadow: 4px 4px 0 0;
  --button-shadow-color: var(--color-text);
  --button-shadow-color-alt: var(--color-accent-soft);
  --button-shadow-on-dark: 4px 4px 0 0 var(--color-text-on-dark);

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
}