/**
 * DESIGN TOKENS - Microlins Bauru Centro
 * Sistema centralizado de cores, tipografia e efeitos
 * Referência única para manter consistência visual
 */

/* ═══════════════════════════════════════════════════════════
   PALETA DE CORES
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Cores Primárias ─────────────────────────────────── */
  --color-primary: #003399;           /* Azul institucional */
  --color-primary-dark: #00236b;      /* Azul escuro */
  --color-primary-mid: #0a3fa8;       /* Azul médio */
  --color-primary-light: #e8effe;     /* Azul muito claro */

  /* ── Cores Secundárias ───────────────────────────────── */
  --color-accent: #FFCC00;            /* Amarelo vibrante */
  --color-accent-dark: #e6b800;       /* Amarelo escuro */
  --color-accent-bg: #fffae5;         /* Background amarelo */

  /* ── Cores de Neutral ────────────────────────────────── */
  --color-white: #ffffff;
  --color-bg-light: #f8f9ff;
  --color-bg-alt: #f4f6fa;
  --color-border: #dde3ef;
  --color-text: #1a2340;
  --color-text-mid: #3d4f75;
  --color-text-soft: #6b7a99;

  /* ── Cores de Feedback ───────────────────────────────── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ── Cores por Categoria de Curso ────────────────────── */
  --grad-tech: linear-gradient(135deg, #003399, #0a3fa8);
  --grad-design: linear-gradient(135deg, #7c3aed, #a855f7);
  --grad-admin: linear-gradient(135deg, #0891b2, #06b6d4);
  --grad-saude: linear-gradient(135deg, #059669, #34d399);
  --grad-softskills: linear-gradient(135deg, #dc2626, #f97316);
  --grad-idiomas: linear-gradient(135deg, #d97706, #fbbf24);
  --grad-noticias: linear-gradient(135deg, #003399, #0a3fa8);
  --grad-carreiras: linear-gradient(135deg, #00236b, #003399);
  --grad-mercado: linear-gradient(135deg, #0a3fa8, #00236b);
}

/* ═══════════════════════════════════════════════════════════
   TIPOGRAFIA
   ═══════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

/* ═══════════════════════════════════════════════════════════
   ESPACIAMENTO (8px baseline)
   ═══════════════════════════════════════════════════════════ */

:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
}

/* ═══════════════════════════════════════════════════════════
   SOMBRAS
   ═══════════════════════════════════════════════════════════ */

:root {
  --shadow-sm: 0 2px 8px rgba(0, 51, 153, 0.1);
  --shadow-md: 0 6px 24px rgba(0, 51, 153, 0.14);
  --shadow-lg: 0 16px 48px rgba(0, 51, 153, 0.18);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════
   BORDER RADIUS
   ═══════════════════════════════════════════════════════════ */

:root {
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1.25rem;   /* 20px */
  --radius-full: 9999px;  /* Fully rounded */
}

/* ═══════════════════════════════════════════════════════════
   TRANSIÇÕES & ANIMAÇÕES
   ═══════════════════════════════════════════════════════════ */

:root {
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════
   BREAKPOINTS (Mobile First)
   ═══════════════════════════════════════════════════════════ */

:root {
  --bp-sm: 640px;   /* Tablet pequeno */
  --bp-md: 768px;   /* Tablet */
  --bp-lg: 1024px;  /* Desktop pequeno */
  --bp-xl: 1280px;  /* Desktop grande */
  --bp-2xl: 1536px; /* Desktop extra grande */
}

/* ═══════════════════════════════════════════════════════════
   CONTAINER QUERIES (Opcional - para componentes)
   ═══════════════════════════════════════════════════════════ */

@supports (container-type: inline-size) {
  .container-query {
    container-type: inline-size;
  }
}

/* ═══════════════════════════════════════════════════════════
   EFEITOS & UTILITIES
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Filtros */
  --filter-blur-sm: blur(2px);
  --filter-blur-md: blur(4px);
  --filter-blur-lg: blur(8px);

  /* Z-index hierarchy */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-bg: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-whatsapp: 999;
}

/* ═══════════════════════════════════════════════════════════
   UTILITÁRIOS RÁPIDOS
   ═══════════════════════════════════════════════════════════ */

/* Apenas ocultar visualmente (mantém acessibilidade) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Truncar texto com elipse */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Linha clamp (quebrar em N linhas) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Flex utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Grid utilities */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
}

/* Animação de fade-in com slide */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Classes para usar as animações */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}