/* =============================================================
   Minha Didática — Design Tokens (CSS Custom Properties)
   ============================================================= */

:root {
  /* ── Paleta de Cores ─────────────────────────────────────── */
  --clr-brand-50:   hsl(250, 100%, 97%);
  --clr-brand-100:  hsl(251, 91%, 92%);
  --clr-brand-200:  hsl(252, 88%, 84%);
  --clr-brand-300:  hsl(253, 84%, 74%);
  --clr-brand-400:  hsl(254, 80%, 62%);
  --clr-brand-500:  hsl(255, 74%, 53%);   /* Primária */
  --clr-brand-600:  hsl(256, 72%, 45%);
  --clr-brand-700:  hsl(257, 70%, 38%);
  --clr-brand-800:  hsl(258, 66%, 30%);
  --clr-brand-900:  hsl(260, 62%, 22%);

  --clr-accent-400: hsl(38, 92%, 60%);    /* Amarelo/Ouro */
  --clr-accent-500: hsl(35, 95%, 50%);

  --clr-success-400: hsl(152, 69%, 45%);
  --clr-success-500: hsl(152, 75%, 38%);
  --clr-error-400:   hsl(4, 86%, 62%);
  --clr-error-500:   hsl(4, 90%, 55%);
  --clr-warning-400: hsl(45, 96%, 56%);

  /* ── Tons Neutros ────────────────────────────────────────── */
  --clr-neutral-0:   hsl(0, 0%, 100%);
  --clr-neutral-50:  hsl(220, 20%, 98%);
  --clr-neutral-100: hsl(220, 14%, 95%);
  --clr-neutral-200: hsl(220, 13%, 90%);
  --clr-neutral-300: hsl(216, 12%, 82%);
  --clr-neutral-400: hsl(218, 10%, 65%);
  --clr-neutral-500: hsl(220, 9%, 48%);
  --clr-neutral-600: hsl(215, 14%, 35%);
  --clr-neutral-700: hsl(217, 19%, 24%);
  --clr-neutral-800: hsl(215, 28%, 16%);
  --clr-neutral-900: hsl(221, 39%, 10%);

  /* ── Semânticos ──────────────────────────────────────────── */
  --clr-bg:          var(--clr-neutral-50);
  --clr-surface:     var(--clr-neutral-0);
  --clr-surface-alt: var(--clr-neutral-100);
  --clr-border:      var(--clr-neutral-200);
  --clr-text:        var(--clr-neutral-800);
  --clr-text-muted:  var(--clr-neutral-500);
  --clr-text-inv:    var(--clr-neutral-0);

  /* ── Tipografia ──────────────────────────────────────────── */
  --font-sans:   'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ── Espaçamentos ────────────────────────────────────────── */
  --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 */

  /* ── Raios de Borda ──────────────────────────────────────── */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px hsl(0 0% 0% / 0.05);
  --shadow-sm:  0 2px 4px hsl(0 0% 0% / 0.08), 0 1px 2px hsl(0 0% 0% / 0.04);
  --shadow-md:  0 4px 12px hsl(0 0% 0% / 0.10), 0 2px 4px hsl(0 0% 0% / 0.06);
  --shadow-lg:  0 8px 24px hsl(0 0% 0% / 0.12), 0 4px 8px hsl(0 0% 0% / 0.08);
  --shadow-xl:  0 16px 48px hsl(0 0% 0% / 0.14), 0 8px 16px hsl(0 0% 0% / 0.10);
  --shadow-brand: 0 8px 32px hsl(255 74% 53% / 0.35);

  /* ── Transições ──────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --nav-height:    4rem;
}