/* ============================================================
   ARAGREENS — Design Tokens
   Base: Manual da Marca AraGreens 2024
   ============================================================ */

:root {
  /* ──────────────────────────────────────────────────────────
     CORES — Paleta principal
     ────────────────────────────────────────────────────────── */

  /* Verde Rúcula — cor principal da marca */
  --color-primary: #0c5c53;
  --color-primary-rgb: 12, 92, 83;
  --color-primary-light: #0e7a6e;
  --color-primary-dark: #094a43;
  --color-primary-50: #e8f5f3;
  --color-primary-100: #c5e8e4;
  --color-primary-200: #9ed9d3;
  --color-primary-300: #6fc4bb;
  --color-primary-400: #3da99e;
  --color-primary-500: #0c5c53;
  --color-primary-600: #0a4f48;
  --color-primary-700: #094a43;
  --color-primary-800: #073a35;
  --color-primary-900: #042b27;

  /* Verde Mimosa — cor de destaque / accent */
  --color-accent: #b9cf2b;
  --color-accent-rgb: 185, 207, 43;
  --color-accent-light: #c8da4e;
  --color-accent-dark: #9ab223;
  --color-accent-50: #f7fae6;
  --color-accent-100: #ecf2bf;
  --color-accent-200: #e0ea95;
  --color-accent-300: #d4e26b;
  --color-accent-400: #c8da4e;
  --color-accent-500: #b9cf2b;
  --color-accent-600: #a5b926;
  --color-accent-700: #8da01f;
  --color-accent-800: #758619;
  --color-accent-900: #5c6a13;

  /* Off White — fundo claro */
  --color-cream: #f6f5ee;
  --color-cream-rgb: 246, 245, 238;
  --color-cream-dark: #ededdf;
  --color-cream-light: #fafaf6;

  /* Preto — textos e detalhes */
  --color-dark: #1d1d1b;
  --color-dark-rgb: 29, 29, 27;

  /* ── Cores semânticas ────────────────────────────────────── */
  --color-bg: #ffffff;
  --color-bg-alt: var(--color-cream);
  --color-bg-dark: var(--color-primary);
  --color-text: var(--color-dark);
  --color-text-muted: #5a5a58;
  --color-text-light: #8a8a87;
  --color-text-on-dark: var(--color-cream);
  --color-text-on-primary: #ffffff;
  --color-border: #e0e0da;
  --color-border-light: #eeeeea;

  /* ── Estados ─────────────────────────────────────────────── */
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-error: #c62828;
  --color-info: var(--color-primary);

  /* ──────────────────────────────────────────────────────────
     TIPOGRAFIA
     Font: Visby CF (brand) / Inter (web fallback)
     ────────────────────────────────────────────────────────── */

  --font-family-brand: "Visby CF", "Inter", system-ui, -apple-system, sans-serif;
  --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", monospace;

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Tamanhos — escala modular (ratio 1.25) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: 2.1rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 2.75rem;    /* 60px */
  --text-6xl: 4.5rem;     /* 72px */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.8;

  /* Letter spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ──────────────────────────────────────────────────────────
     ESPAÇAMENTO
     Base: 4px
     ────────────────────────────────────────────────────────── */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ── Seções do site ──────────────────────────────────────── */
  --section-padding-y: var(--space-20);
  --section-padding-y-lg: var(--space-32);
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: var(--space-6);

  /* ──────────────────────────────────────────────────────────
     BORDAS & RAIOS
     ────────────────────────────────────────────────────────── */

  --radius-sm: 0.25rem;  /* 4px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px */
  --radius-xl: 1rem;     /* 16px */
  --radius-2xl: 1.5rem;  /* 24px */
  --radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
     SOMBRAS
     ────────────────────────────────────────────────────────── */

  --shadow-xs: 0 1px 2px rgba(var(--color-dark-rgb), 0.05);
  --shadow-sm: 0 1px 3px rgba(var(--color-dark-rgb), 0.08), 0 1px 2px rgba(var(--color-dark-rgb), 0.04);
  --shadow-md: 0 4px 6px rgba(var(--color-dark-rgb), 0.07), 0 2px 4px rgba(var(--color-dark-rgb), 0.04);
  --shadow-lg: 0 10px 15px rgba(var(--color-dark-rgb), 0.08), 0 4px 6px rgba(var(--color-dark-rgb), 0.04);
  --shadow-xl: 0 20px 25px rgba(var(--color-dark-rgb), 0.10), 0 8px 10px rgba(var(--color-dark-rgb), 0.04);
  --shadow-2xl: 0 25px 50px rgba(var(--color-dark-rgb), 0.15);

  /* ──────────────────────────────────────────────────────────
     TRANSIÇÕES
     ────────────────────────────────────────────────────────── */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────────────────────
     Z-INDEX
     ────────────────────────────────────────────────────────── */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ──────────────────────────────────────────────────────────
     BREAKPOINTS (referência — usar em @media)
     ────────────────────────────────────────────────────────── */
  /* --bp-sm: 640px;  */
  /* --bp-md: 768px;  */
  /* --bp-lg: 1024px; */
  /* --bp-xl: 1280px; */
}

/* ── Responsividade: ajustes de seção ────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--space-12);
    --section-padding-y-lg: var(--space-20);
    --container-padding: var(--space-4);
    --text-5xl: 2.75rem;
    --text-6xl: 3.25rem;
    --text-4xl: 2.25rem;  
  }
}