/* =============================================================================
   CZSBrasil — Design Tokens (Consolidated)
   =============================================================================
   Fonte unica de verdade para TODOS os tokens visuais do site.
   Organizado em camadas: Global > Dashboard > Login > Toast.

   Tokens duplicados em camadas inferiores referenciam os globais via var().
   Componentes DEVEM usar tokens — nunca hardcodar cores/fontes/espacamentos.
============================================================================= */

:root {

	/* ===================================================================
	   GLOBAL LAYER — identidade e base compartilhada
	   =================================================================== */

	/* --- Brand --- */
	--czs-brand-primary: #5865f2;
	--czs-brand-primary-hover: #4752c4;
	--czs-brand-primary-soft: rgba(88, 101, 242, 0.12);
	--czs-brand-accent: #ec4899;
	--czs-brand-gradient: linear-gradient(135deg, #5865f2 0%, #ec4899 100%);

	/* RGB channels (para composicao alpha com rgb()) */
	--czs-brand-primary-rgb: 88 101 242;
	--czs-brand-accent-rgb: 236 72 153;

	/* Neons gamer (usar com moderacao) */
	--czs-neon-green: #01ff8e;
	--czs-neon-blue: #0391ff;
	--czs-neon-pink: #fe63fc;
	--czs-neon-red: #ff1f58;
	--czs-neon-yellow: #fbec6b;

	/* --- Neutros (dark mode padrao) --- */
	--czs-bg-base: #0b0e13;
	--czs-bg-elevated: #1a1d29;
	--czs-bg-input: rgba(255, 255, 255, 0.04);
	--czs-bg-hover: rgba(255, 255, 255, 0.06);

	--czs-border: rgba(255, 255, 255, 0.08);
	--czs-border-strong: rgba(255, 255, 255, 0.16);

	--czs-text-primary: #f0f6fc;
	--czs-text-secondary: #b9bbc6;
	--czs-text-muted: #8b8d97;
	--czs-text-disabled: rgba(255, 255, 255, 0.3);

	/* --- Overlays (superficies com opacidade) --- */
	--czs-overlay-subtle: rgba(255, 255, 255, 0.03);
	--czs-overlay-light: rgba(255, 255, 255, 0.05);
	--czs-overlay-medium: rgba(255, 255, 255, 0.08);
	--czs-overlay-strong: rgba(255, 255, 255, 0.1);

	/* --- Semanticas --- */
	--czs-success: #10b981;
	--czs-success-soft: rgba(16, 185, 129, 0.12);
	--czs-success-border: rgba(16, 185, 129, 0.3);
	--czs-success-rgb: 16 185 129;

	--czs-warning: #f59e0b;
	--czs-warning-soft: rgba(245, 158, 11, 0.12);
	--czs-warning-border: rgba(245, 158, 11, 0.3);
	--czs-warning-rgb: 245 158 11;

	--czs-danger: #ef4444;
	--czs-danger-soft: rgba(239, 68, 68, 0.12);
	--czs-danger-border: rgba(239, 68, 68, 0.3);
	--czs-danger-rgb: 239 68 68;

	--czs-info: #3b82f6;
	--czs-info-soft: rgba(59, 130, 246, 0.12);
	--czs-info-border: rgba(59, 130, 246, 0.3);
	--czs-info-rgb: 59 130 246;

	/* --- Acentos (diferenciar modulos: Lojinha, Roleta, etc.) --- */
	--czs-accent-purple: #8b5cf6;
	--czs-accent-purple-rgb: 139 92 246;
	--czs-accent-violet: #a855f7;
	--czs-accent-orange: #f97316;
	--czs-accent-blue: #3b82f6;
	--czs-accent-green: #22c55e;
	--czs-accent-pink: #ec4899;

	/* --- Tipografia --- */
	--czs-font-display: 'Goldman', 'Rajdhani', system-ui, sans-serif;
	--czs-font-heading: 'Rajdhani', system-ui, sans-serif;
	--czs-font-body: 'Poppins', system-ui, -apple-system, sans-serif;
	--czs-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

	--czs-fs-xs: 0.75rem;
	--czs-fs-sm: 0.875rem;
	--czs-fs-base: 1rem;
	--czs-fs-lg: 1.125rem;
	--czs-fs-xl: 1.25rem;
	--czs-fs-2xl: 1.5rem;
	--czs-fs-3xl: 1.875rem;
	--czs-fs-4xl: 2.25rem;

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

	--czs-lh-tight: 1.2;
	--czs-lh-normal: 1.5;
	--czs-lh-relaxed: 1.7;

	/* --- Espacamento (escala em rem, 16px base) --- */
	--czs-space-1: 0.25rem;
	--czs-space-2: 0.5rem;
	--czs-space-3: 0.75rem;
	--czs-space-4: 1rem;
	--czs-space-5: 1.25rem;
	--czs-space-6: 1.5rem;
	--czs-space-8: 2rem;
	--czs-space-10: 2.5rem;
	--czs-space-12: 3rem;
	--czs-space-16: 4rem;

	/* --- Radii (cantos arredondados) --- */
	--czs-radius-sm: 4px;
	--czs-radius-md: 8px;
	--czs-radius-lg: 12px;
	--czs-radius-xl: 16px;
	--czs-radius-full: 999px;

	/* --- Sombras --- */
	--czs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
	--czs-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
	--czs-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
	--czs-shadow-glow-primary: 0 0 0 4px rgba(88, 101, 242, 0.25);
	--czs-shadow-glow-accent: 0 0 0 4px rgba(236, 72, 153, 0.25);

	/* --- Movimento --- */
	--czs-transition-fast: 120ms ease;
	--czs-transition-normal: 200ms ease;
	--czs-transition-slow: 320ms ease;
	--czs-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Z-Index (escala documentada) --- */
	--czs-z-dropdown: 100;
	--czs-z-sticky: 200;
	--czs-z-fixed: 300;
	--czs-z-modal-back: 400;
	--czs-z-modal: 500;
	--czs-z-popover: 600;
	--czs-z-tooltip: 700;
	--czs-z-toast: 800;


	/* ===================================================================
	   DASHBOARD LAYER — contexto da area logada
	   Valores unicos ao dashboard. Duplicatas referenciam o global.
	   =================================================================== */

	/* Backgrounds (paleta mais escura que o global) */
	--dash-bg-primary: #06070b;
	--dash-bg-secondary: #0c0e16;
	--dash-bg-tertiary: #12151f;
	--dash-bg-card: #0f1119;

	/* Borders (opacidade menor que global) */
	--dash-border: rgba(255, 255, 255, 0.06);
	--dash-border-hover: rgba(255, 255, 255, 0.12);

	/* Text (branco puro vs global off-white) */
	--dash-text-primary: #ffffff;
	--dash-text-secondary: rgba(255, 255, 255, 0.7);
	--dash-text-muted: rgba(255, 255, 255, 0.45);

	/* Accent (aliases do global) */
	--dash-accent-rgb: var(--czs-brand-primary-rgb);
	--dash-accent-primary: var(--czs-brand-primary);
	--dash-accent-secondary: var(--czs-brand-accent);
	--dash-accent-gradient: var(--czs-brand-gradient);

	/* Status (aliases do global) */
	--dash-success-rgb: var(--czs-success-rgb);
	--dash-warning-rgb: var(--czs-warning-rgb);
	--dash-error-rgb: var(--czs-danger-rgb);
	--dash-vip-rgb: var(--czs-accent-purple-rgb);

	--dash-success: var(--czs-success);
	--dash-warning: var(--czs-warning);
	--dash-error: var(--czs-danger);
	--dash-vip: var(--czs-accent-purple);

	/* VIP status gradients */
	--dash-status-normal-from: var(--czs-success);
	--dash-status-normal-to: #34d399;
	--dash-status-attention-from: var(--czs-warning);
	--dash-status-attention-to: #fbbf24;
	--dash-status-urgent-from: #f97316;
	--dash-status-urgent-to: var(--czs-danger);
	--dash-status-critical-from: var(--czs-danger);
	--dash-status-critical-to: #dc2626;

	/* Radii (escala dashboard — maior que global) */
	--dash-radius-xs: 5px;
	--dash-radius-sm: 10px;
	--dash-radius-md: 16px;
	--dash-radius-lg: 24px;
	--dash-radius-xl: 32px;

	/* Shadow & Motion */
	--dash-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
	--dash-ease: var(--czs-ease);
	--dash-transition: all 0.3s var(--dash-ease);

	/* Fonts (aliases com fallbacks especificos) */
	--dash-font-display: var(--czs-font-display);
	--dash-font-heading: var(--czs-font-heading);
	--dash-font-body: var(--czs-font-body);
	--dash-font-mono: 'Roboto Mono', 'Consolas', monospace;

	/* Overlays (aliases do global) */
	--dash-overlay-subtle: var(--czs-overlay-subtle);
	--dash-overlay-light: var(--czs-overlay-light);
	--dash-overlay-medium: var(--czs-overlay-medium);
	--dash-overlay-strong: var(--czs-overlay-strong);


	/* ===================================================================
	   LOGIN LAYER — contexto da pagina de login
	   Compartilha a paleta do dashboard. Duplicatas sao aliases.
	   =================================================================== */

	--login-bg-primary: var(--dash-bg-primary);
	--login-bg-secondary: var(--dash-bg-secondary);
	--login-bg-card: var(--dash-bg-card);
	--login-border: var(--dash-border);
	--login-text-primary: var(--dash-text-primary);
	--login-text-secondary: var(--dash-text-secondary);
	--login-text-muted: var(--dash-text-muted);
	--login-accent-rgb: var(--czs-brand-primary-rgb);
	--login-accent: var(--czs-brand-primary);
	--login-accent-hover: #6973F7;
	--login-radius-sm: var(--dash-radius-sm);
	--login-radius-md: var(--dash-radius-md);
	--login-radius-lg: var(--dash-radius-lg);
	--login-radius-xl: var(--dash-radius-xl);
	--login-ease: var(--dash-ease);
	--login-font-display: var(--czs-font-display);
	--login-font-heading: var(--czs-font-heading);
	--login-font-body: var(--czs-font-body);


	/* ===================================================================
	   TOAST LAYER — tokens do componente toast
	   RGB channels para composicao alpha no background do toast.
	   =================================================================== */

	--czs-toast-success: var(--czs-success-rgb);
	--czs-toast-success-dark: 5 150 105;
	--czs-toast-error: var(--czs-danger-rgb);
	--czs-toast-error-dark: 220 38 38;
	--czs-toast-warning: var(--czs-warning-rgb);
	--czs-toast-warning-dark: 217 119 6;
	--czs-toast-info: var(--czs-brand-primary-rgb);
	--czs-toast-info-dark: 71 82 196;

	--czs-toast-gap: 12px;
	--czs-toast-padding-block: 16px;
	--czs-toast-padding-inline: 20px;
	--czs-toast-inset: 24px;
	--czs-toast-max-width: 420px;
	--czs-toast-icon-size: 40px;
	--czs-toast-close-size: 24px;
	--czs-toast-radius: 16px;
	--czs-toast-progress-height: 3px;
	--czs-toast-font: var(--czs-font-body);
	--czs-toast-title-size: 0.95rem;
	--czs-toast-message-size: 0.85rem;
	--czs-toast-duration: 0.4s;
	--czs-toast-easing: var(--czs-ease);
	--czs-toast-auto-close: 5s;
	--czs-toast-overlay-light: rgba(255, 255, 255, 0.1);
	--czs-toast-overlay-medium: rgba(255, 255, 255, 0.2);
	--czs-toast-text-primary: #fff;
	--czs-toast-text-secondary: rgba(255, 255, 255, 0.9);
	--czs-toast-text-muted: rgba(255, 255, 255, 0.7);
}