/* tokens.css */

:root {
  /* fontes */
  --font-family-base: 'Rubik', sans-serif;
  --font-family-heading: 'Aleo', serif;

  /* tamanhos */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 3rem;

  /* line-height */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.7;

  /* pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* espaçamentos */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* cores base */
  --color-white: #f9f9f9;
  --color-black: #22223B;
  --color-neutral-100: #F5F2F0;
  --color-neutral-200: #e9e9e9;
  --color-neutral-300: #EDE1D9;
  --color-neutral-400: #999999;
  --color-neutral-600: #C9ADA7;
  --color-neutral-700: #444444;
  --color-neutral-900: #4A4E69;

  --color-primary: #81B29A;
  --color-secondary: #FFE6A7;
  --color-accent: #E07A5F;

  /* tokens semânticos */
  --color-bg: var(--color-white);
  --color-surface: var(--color-neutral-100);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-neutral-700);
  --color-border: var(--color-neutral-200);
  --color-link: var(--color-primary);
  --color-heading: var(--color-neutral-900);

  /* bordas */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-xxl: 56px;
  --radius-pill: 999px;

  /* sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);

  /* largura */
  --max-width-main: 120rem; /* 1920px */

  /* largura - textos */
  --content-width: 48rem; /* 768px */
  --content-width-lg: 60rem; /* 960px */

  /* margin */
  --site-margin: clamp(1.5rem, 2.5vw, 3rem);

  /* transições */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* header */
  --header-height: 80px;

  /* z-index */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
}