/**
 * CSS Custom Properties — Bird Capital Website
 * Brand colors, typography, and spacing system
 */

:root {
  /* ===== PRIMARY COLORS ===== */
  --color-beija-flor: #ACD5AE;      /* Soft green - accents, growth */
  --color-gaivota: #F4F4F4;          /* Light neutral - backgrounds */
  --color-pato-real: #36565A;        /* Dark teal - trust */
  --color-martim-pescador: #4E7D85;  /* Mid teal - hero/supporting */

  /* ===== SECONDARY COLORS ===== */
  --color-corvo: #0F262D;            /* Deep dark - text, hero bg alt */
  --color-gaio-azul: #3F97B6;        /* Blue - accent highlights */
  --color-periquito: #79CB8F;        /* Bright green - growth */
  --color-garca: #A7BCC3;            /* Soft blue-gray - dividers */

  /* ===== SEMANTIC COLORS ===== */
  --color-background-dark: var(--color-martim-pescador);
  --color-background-light: var(--color-gaivota);
  --color-background-white: #FFFFFF;
  --color-text-light: var(--color-gaivota);
  --color-text-dark: var(--color-corvo);
  --color-accent: var(--color-beija-flor);
  --color-divider: var(--color-garca);

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Josefin Sans', sans-serif;
  --font-secondary: 'Source Sans 3', sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  /* Font sizes - Mobile first */
  --font-size-hero: clamp(1.4rem, 3.5vw + 0.7rem, 3.15rem); /* ~22px → ~50px (30% smaller) */
  --font-size-h2: clamp(1.5rem, 3vw + 0.5rem, 3rem);       /* 24px → 48px */
  --font-size-h3: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);  /* 18px → 24px */
  --font-size-body: 1rem;                                   /* 16px */
  --font-size-body-lg: 1.125rem;                           /* 18px */
  --font-size-small: 0.875rem;                             /* 14px */

  /* Line heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ===== SPACING ===== */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2rem;      /* 32px */
  --space-xl: 3rem;      /* 48px */
  --space-2xl: 4.5rem;   /* 72px */
  --space-3xl: 6rem;     /* 96px */
  --space-4xl: 7.5rem;   /* 120px */

  /* Page margins */
  --page-margin: var(--space-md);  /* 24px mobile */

  /* Max widths */
  --max-width-content: 1200px;
  --max-width-text: 680px;
  --max-width-narrow: 360px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===== BORDERS ===== */
  --border-thin: 1px solid var(--color-divider);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --page-margin: var(--space-xl);  /* 48px */
    --font-size-body: 1.125rem;      /* 18px */
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  :root {
    --page-margin: 5rem;  /* 80px */
  }
}