/* =========================================================
   VARIABLES.CSS
   Tokens do Design System (docs/design-system.md).
   Fonte única de verdade de cor, tipografia, espaçamento,
   raio, sombra e breakpoints. Nenhum outro arquivo deve
   declarar valores "mágicos" — sempre referenciar var(--...).
   ========================================================= */

:root {
  /* ---------- Regra 60–30–10: roxo de destaque (10%) ---------- */
  --color-primary-50: #f4f3fa;
  --color-primary-100: #e5e2f2;
  --color-primary-200: #cac5e5;
  --color-primary-300: #aaa4dc;
  --color-primary-400: #7770bd;
  --color-primary-500: #312783; /* base oficial */
  --color-primary-600: #281f70; /* hover */
  --color-primary-700: #20185d; /* active */
  --color-primary-800: #191249;
  --color-primary-900: #110c34;

  /* ---------- Regra 60–30–10: verde predominante (60%) ---------- */
  --color-secondary-100: #d9edce;
  --color-secondary-300: #9bd77b;
  --color-secondary-500: #0f5e3a; /* verde oficial escuro */
  --color-secondary-600: #0c4d30;
  --color-secondary-700: #093d26;
  --color-secondary-900: #052a1a;

  /* ---------- Verde vivo oficial ---------- */
  --color-tertiary-100: #eef8e9;
  --color-tertiary-300: #9bd77b;
  --color-tertiary-500: #5eb130;

  /* ---------- Laranja de destaque ---------- */
  --color-orange-500: #e97824;
  --color-orange-700: #a94718;

  /* ---------- Cor: Neutros ---------- */
  --color-neutral-50: #fafafb;
  --color-neutral-100: #f4f8f2;
  --color-neutral-200: #dbe9d4;
  --color-neutral-300: #bfd0b7;
  --color-neutral-400: #8b9e84;
  --color-neutral-500: #64715f;
  --color-neutral-600: #4b5947;
  --color-neutral-700: #344230;
  --color-neutral-800: #1f2f23;
  --color-neutral-900: #101d14;

  /* ---------- Cor: Semânticas ---------- */
  --color-success: #2e9e6b;
  --color-success-text: #1f7a52;
  --color-warning: #e3a337;
  --color-warning-text: #b87b1e;
  --color-error: #d64566;
  --color-error-text: #b23256;
  --color-info: #4c7ee0;
  --color-info-text: #3861b8;

  /* ---------- Cor: Papéis semânticos de UI ---------- */
  --color-background: #ffffff;
  --color-background-alt: #f5faf2;
  --color-surface: var(--color-neutral-100);
  --color-border: var(--color-neutral-200);
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-300);
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-secondary: #d9edce;

  /* ---------- Tipografia ---------- */
  --font-primary: "Kanit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Lazer 84 é fonte proprietária do Manual de Marca (não distribuída publicamente).
     Enquanto os arquivos licenciados não são adicionados em assets/fonts/,
     "Caveat" (Google Fonts, open-source) atua como substituta visual temporária
     de estilo manuscrito/marcador. Ver README.md § Tipografia. */
  --font-secondary: "Lazer84", "Caveat", cursive;

  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --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 */

  /* ---------- Raio ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Sombras tingidas de verde ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 94, 58, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 94, 58, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 94, 58, 0.1);
  --shadow-lg: 0 16px 40px rgba(15, 94, 58, 0.14);

  /* ---------- Transições ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* ---------- Container / grid ---------- */
  --container-max: 1440px;
  --container-padding: var(--space-4);

  /* ---------- Breakpoints (referência — media queries não leem var()) ---------- */
  /* mobile: 0–639px | tablet: 640–1023px | notebook: 1024–1279px
     desktop: 1280–1535px | desktop-xl: ≥1536px */
}