/* ==========================================================================
   Central do Tenista - Design System
   Base visual tokens, utilities e reset para toda a plataforma
   ========================================================================== */

:root {
    /*
     * Marca alinhada à sidebar (gradiente #005a9a → #0070bc).
     * Primário = azul institucional; verde só em estados de sucesso discretos.
     */
    --ct-primary: #0070bc;
    --ct-primary-light: #4a9fd4;
    --ct-primary-lighter: #e6f2fa;
    --ct-primary-dark: #005a9a;
    --ct-primary-rgb: 0, 112, 188;

    /* Secundário = azul mais claro (superfícies / hovers), nunca verde */
    --ct-secondary: #3d8fc8;
    --ct-secondary-light: #cfe8f5;
    --ct-secondary-lighter: #e8f4fc;

    --ct-accent: #b45309;
    --ct-accent-light: #d97706;
    --ct-accent-lighter: #fff7ed;

    /* Estados semânticos — saturados reduzidos (confiança, não “neon”) */
    --ct-success: #166534;
    --ct-success-light: #ecfdf3;
    --ct-warning: #b45309;
    --ct-warning-light: #fff8eb;
    --ct-danger: #b91c1c;
    --ct-danger-light: #fef2f2;
    --ct-info: #0369a1;
    --ct-info-light: #e0f2fe;

    /* Neutral Palette */
    --ct-white: #FFFFFF;
    --ct-gray-25: #FCFCFD;
    --ct-gray-50: #F9FAFB;
    --ct-gray-100: #F3F4F6;
    --ct-gray-200: #E5E7EB;
    --ct-gray-300: #D1D5DB;
    --ct-gray-400: #9CA3AF;
    --ct-gray-500: #6B7280;
    --ct-gray-600: #4B5563;
    --ct-gray-700: #374151;
    --ct-gray-800: #1F2937;
    --ct-gray-900: #111827;
    /* Tom mais escuro para bordas/sombras — não usar como cor de texto principal */
    --ct-ink: #111827;

    /*
     * Hierarquia de texto (SaaS) — evita #000 e cinza-900 pesado no corpo
     * Aliases curtos para uso em qualquer folha de estilo
     */
    --ct-text-heading: #1F2937;
    --ct-text-body: #4B5563;
    --ct-text-secondary: #6B7280;
    --ct-text-tertiary: #9CA3AF;
    --text-heading: var(--ct-text-heading);
    --text-body: var(--ct-text-body);
    --text-secondary: var(--ct-text-secondary);
    --text-muted: var(--ct-text-tertiary);

    /* Typography */
    --ct-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ct-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

    --ct-leading-tight: 1.25;
    --ct-leading-normal: 1.5;
    --ct-leading-relaxed: 1.75;

    --ct-weight-normal: 400;
    --ct-weight-medium: 500;
    --ct-weight-semibold: 600;
    --ct-weight-bold: 700;

    /* Spacing */
    --ct-space-0: 0;
    --ct-space-1: 0.25rem;
    --ct-space-2: 0.5rem;
    --ct-space-3: 0.75rem;
    --ct-space-4: 1rem;
    --ct-space-5: 1.25rem;
    --ct-space-6: 1.5rem;
    --ct-space-8: 2rem;
    --ct-space-10: 2.5rem;
    --ct-space-12: 3rem;
    --ct-space-16: 4rem;
    --ct-space-20: 5rem;

    /* Raios: botões ~6px, cartões ~8px (evita “pill” genérico) */
    --ct-radius-sm: 0.25rem;
    --ct-radius: 0.375rem;
    --ct-radius-button: 0.375rem;
    --ct-radius-lg: 0.5rem;
    --ct-radius-xl: 0.625rem;
    --ct-radius-2xl: 1rem;
    --ct-radius-full: 9999px;

    /* Sombras leves (SaaS sóbrio) */
    --ct-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ct-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --ct-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    --ct-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07);
    --ct-shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.08);
    --ct-shadow-xl: 0 12px 28px rgba(15, 23, 42, 0.1);

    /* Transitions */
    --ct-transition-fast: 150ms ease;
    --ct-transition: 200ms ease;
    --ct-transition-slow: 300ms ease;

    /* Layout */
    --ct-sidebar-width: 260px;
    --ct-sidebar-collapsed: 72px;
    --ct-topbar-height: 64px;
    --ct-content-max-width: 1600px;
    /* Cadastro torneio/quadra e fluxos iguais à coluna principal (referência: reserva participante) */
    --ct-torneio-flow-max-width: 100%;

    /* Bootstrap 5.3 — alinhar tipografia ao DS (carrega antes; estes valores sobrescrevem) */
    --bs-body-color: var(--ct-text-body);
    --bs-heading-color: var(--ct-text-heading);
    --bs-secondary-color: var(--ct-text-secondary);
    --bs-tertiary-color: var(--ct-text-tertiary);
    --bs-emphasis-color: var(--ct-text-heading);
    /* RGB de #6B7280 — usado em .text-muted e utilitários com opacidade */
    --bs-secondary-rgb: 107, 114, 128;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--ct-font-sans);
    font-size: var(--ct-text-base);
    line-height: var(--ct-leading-normal);
    color: var(--ct-text-body);
    background-color: var(--ct-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hierarquia global de títulos e texto corrido */
h1, h2, h3, .h1, .h2, .h3 {
    color: var(--ct-text-heading);
    font-weight: var(--ct-weight-semibold);
    line-height: var(--ct-leading-tight);
}

h4, h5, h6, .h4, .h5, .h6 {
    color: var(--ct-text-heading);
    font-weight: var(--ct-weight-semibold);
    line-height: var(--ct-leading-tight);
}

p, li {
    color: var(--ct-text-body);
}

small, .small {
    color: var(--ct-text-secondary);
}

label,
.form-label,
.ct-label {
    color: var(--ct-text-body);
    font-weight: var(--ct-weight-medium);
}

/* Descrições / ajuda abaixo do campo */
.form-text {
    color: var(--ct-text-tertiary);
}

.table {
    --bs-table-color: var(--ct-text-body);
    --bs-table-striped-color: var(--ct-text-body);
    --bs-table-active-color: var(--ct-text-body);
    --bs-table-hover-color: var(--ct-text-body);
}

.table thead th {
    color: var(--ct-text-secondary);
    font-weight: var(--ct-weight-semibold);
}

/* Utilitários Bootstrap: evitar preto (#000) e cinza padrão pesado */
.text-dark {
    color: var(--ct-text-heading) !important;
}

/* ==========================================================================
   Typography Utilities
   ========================================================================== */

.ct-text-xs { font-size: var(--ct-text-xs); }
.ct-text-sm { font-size: var(--ct-text-sm); }
.ct-text-base { font-size: var(--ct-text-base); }
.ct-text-lg { font-size: var(--ct-text-lg); }
.ct-text-xl { font-size: var(--ct-text-xl); }
.ct-text-2xl { font-size: var(--ct-text-2xl); }
.ct-text-3xl { font-size: var(--ct-text-3xl); }
.ct-text-4xl { font-size: var(--ct-text-4xl); }

.ct-font-medium { font-weight: var(--ct-weight-medium); }
.ct-font-semibold { font-weight: var(--ct-weight-semibold); }
.ct-font-bold { font-weight: var(--ct-weight-bold); }

.ct-text-muted { color: var(--ct-text-tertiary); }
/* Utilitário de marca (azul) — não confundir com tokens --text-* */
.ct-text-primary { color: var(--ct-primary); }
.ct-text-heading-token { color: var(--ct-text-heading); }
.ct-text-body-token { color: var(--ct-text-body); }
.ct-text-secondary-token { color: var(--ct-text-secondary); }
.ct-text-success { color: var(--ct-success); }
.ct-text-danger { color: var(--ct-danger); }
.ct-text-warning { color: var(--ct-warning); }

.ct-heading {
    font-weight: var(--ct-weight-bold);
    line-height: var(--ct-leading-tight);
    color: var(--ct-text-heading);
    letter-spacing: -0.025em;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.ct-flex { display: flex; }
.ct-flex-col { flex-direction: column; }
.ct-flex-wrap { flex-wrap: wrap; }
.ct-items-center { align-items: center; }
.ct-items-start { align-items: flex-start; }
.ct-justify-between { justify-content: space-between; }
.ct-justify-center { justify-content: center; }
.ct-justify-end { justify-content: flex-end; }
.ct-gap-1 { gap: var(--ct-space-1); }
.ct-gap-2 { gap: var(--ct-space-2); }
.ct-gap-3 { gap: var(--ct-space-3); }
.ct-gap-4 { gap: var(--ct-space-4); }
.ct-gap-6 { gap: var(--ct-space-6); }
.ct-gap-8 { gap: var(--ct-space-8); }
.ct-flex-1 { flex: 1; }
.ct-flex-shrink-0 { flex-shrink: 0; }

.ct-grid {
    display: grid;
    gap: var(--ct-space-6);
}

.ct-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ct-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ct-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) {
    .ct-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ct-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ct-grid-4, .ct-grid-3, .ct-grid-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

.ct-p-0 { padding: 0; }
.ct-p-2 { padding: var(--ct-space-2); }
.ct-p-3 { padding: var(--ct-space-3); }
.ct-p-4 { padding: var(--ct-space-4); }
.ct-p-6 { padding: var(--ct-space-6); }
.ct-p-8 { padding: var(--ct-space-8); }

.ct-px-4 { padding-left: var(--ct-space-4); padding-right: var(--ct-space-4); }
.ct-px-6 { padding-left: var(--ct-space-6); padding-right: var(--ct-space-6); }
.ct-py-2 { padding-top: var(--ct-space-2); padding-bottom: var(--ct-space-2); }
.ct-py-3 { padding-top: var(--ct-space-3); padding-bottom: var(--ct-space-3); }
.ct-py-4 { padding-top: var(--ct-space-4); padding-bottom: var(--ct-space-4); }

.ct-m-0 { margin: 0; }
.ct-mb-1 { margin-bottom: var(--ct-space-1); }
.ct-mb-2 { margin-bottom: var(--ct-space-2); }
.ct-mb-3 { margin-bottom: var(--ct-space-3); }
.ct-mb-4 { margin-bottom: var(--ct-space-4); }
.ct-mb-6 { margin-bottom: var(--ct-space-6); }
.ct-mb-8 { margin-bottom: var(--ct-space-8); }
.ct-mt-2 { margin-top: var(--ct-space-2); }
.ct-mt-4 { margin-top: var(--ct-space-4); }
.ct-mt-6 { margin-top: var(--ct-space-6); }

/* ==========================================================================
   Transition
   ========================================================================== */

.ct-transition {
    transition: all var(--ct-transition);
}

.ct-transition-fast {
    transition: all var(--ct-transition-fast);
}