/* =========================================================
   CrossFut Manager — Design Tokens (primitivos)
   Camada de fundacao: escalas de cor, tipografia, espacamento,
   raio, sombras e motion. As variaveis SEMANTICAS de tema
   (--bg-surface, --text-primary, etc.) continuam em
   design-system.css; aqui ficam os primitivos que elas consomem.
   ========================================================= */

:root {
  /* ---------- Cor: primaria (indigo) escala 50-900 ---------- */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5; /* primaria da marca */
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;

  /* Gradiente de assinatura (indigo -> violeta) */
  --gradient-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #9333ea 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(79,70,229,0.12) 0%, rgba(147,51,234,0.12) 100%);

  /* ---------- Cor: neutros escala 50-950 ---------- */
  --neutral-50:  #f8f9fb;
  --neutral-100: #f1f2f6;
  --neutral-200: #e7e7ec;
  --neutral-300: #d2d3db;
  --neutral-400: #9799a3;
  --neutral-500: #6b6d78;
  --neutral-600: #4c4e59;
  --neutral-700: #34363f;
  --neutral-800: #1f2027;
  --neutral-900: #16171d;
  --neutral-950: #0d0e12;

  /* ---------- Cor: semanticas (status de presenca = identidade viva) ---------- */
  --presente:    #16a34a;  --presente-soft:    #ecfdf3;  --presente-ring:    rgba(22,163,74,0.35);
  --falta:       #dc2626;  --falta-soft:       #fef2f2;  --falta-ring:       rgba(220,38,38,0.35);
  --justificada: #d97706;  --justificada-soft: #fffbeb;  --justificada-ring: rgba(217,119,6,0.35);
  --atrasado:    #ea580c;  --atrasado-soft:    #fff1e6;  --atrasado-ring:    rgba(234,88,12,0.35);
  --info:        #0891b2;  --info-soft:        #ecfeff;

  /* ---------- Tipografia ---------- */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md:   1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.375rem;   /* 22 */
  --text-2xl:  1.75rem;    /* 28 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  3rem;       /* 48 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.5;

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

  /* ---------- Raio ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---------- Sombras (suaves, em camadas) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.16), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-brand: 0 8px 24px rgba(79, 70, 229, 0.28);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sombras mais densas no dark, senao os cards "somem" no fundo escuro */
:root[data-theme='dark'],
[data-theme='dark'] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.7);
}

/* Acessibilidade: respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}