/* =========================================================
   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 {
  /* ---------- Cor: Primary (Lilás) ---------- */
  --color-primary-50: #f5f2fe;
  --color-primary-100: #eae1fc;
  --color-primary-200: #d3c2f9;
  --color-primary-300: #b69af3;
  --color-primary-400: #9b72ec;
  --color-primary-500: #8558e3; /* base */
  --color-primary-600: #6d3fc9; /* hover */
  --color-primary-700: #5730a0; /* active */
  --color-primary-800: #3f2277;
  --color-primary-900: #2a1750;

  /* ---------- Cor: Secondary (Açaí) ---------- */
  --color-secondary-100: #decbea;
  --color-secondary-300: #8c68a3;
  --color-secondary-500: #3d1e52; /* base */
  --color-secondary-600: #331847;
  --color-secondary-700: #2a1439;
  --color-secondary-900: #140a1c;

  /* ---------- Cor: Tertiary (Lavanda) ---------- */
  --color-tertiary-100: #f3effc;
  --color-tertiary-300: #d9ccf2;
  --color-tertiary-500: #ac94d9;

  /* ---------- Cor: Neutros ---------- */
  --color-neutral-50: #fafafb;
  --color-neutral-100: #f4f1f9;
  --color-neutral-200: #e4deef;
  --color-neutral-300: #c9c1d9;
  --color-neutral-400: #9a90ac;
  --color-neutral-500: #6e6480;
  --color-neutral-600: #544a63;
  --color-neutral-700: #3a3247;
  --color-neutral-800: #241b33;
  --color-neutral-900: #150f1f;

  /* ---------- 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: #faf8fc;
  --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: var(--color-tertiary-300);

  /* ---------- 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;

  /* ---------- Sombra (tingidas de açaí) ---------- */
  --shadow-xs: 0 1px 2px rgba(61, 30, 82, 0.06);
  --shadow-sm: 0 2px 8px rgba(61, 30, 82, 0.08);
  --shadow-md: 0 8px 24px rgba(61, 30, 82, 0.1);
  --shadow-lg: 0 16px 40px rgba(61, 30, 82, 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 */
}